vuex的操作流程

最新推荐文章于 2025-06-21 19:01:03 发布

原创最新推荐文章于 2025-06-21 19:01:03 发布 · 889 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vuex

【Vue组件的封装】专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了在Vue CLI v3.7.0初始化的项目中，如何使用Vuex进行状态管理。首先在store.js中定义方法，接着在main.js中引入并调用这些方法，然后在具体的.vue组件中调用store中的方法和公共属性。通过dispatch触发actions，actions再commit到mutations以更新状态，实现组件间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用Vue CLI v3.7.0 初始化一个Vue的项目之后。
默认已经安装好了 vuex。
我们只需要在 store.js中书写，就可以。

1.在store.js 里面写方法

在 store.js 里面的 actions中，写方法。
store.js:

import Vue from 'vue'
import Vuex from 'vuex'
import {login, validate} from './api/user/user.js';
import {setLocal} from './libs/local';

Vue.use(Vuex)

export default new Vuex.Store({
  //公共状态
  state: {
    //是否显示loading
    isShowLoading: false,
    //用户登录后的用户名
    username: '123'
  },
  //修改状态
  //可以在其他文件，使用 store.commit 去调用 showLoading方法
  mutations: {
    //显示loading
    showLoading(state){
      state.isShowLoading = true
    },
    //隐藏loading
    hideLoading(state){
      state.isShowLoading = false
    },
    setUser(state, username){
      state.username = username;
    }
  },
  //动作，这里面存放着接口调用
  actions: {
    async toLogin({commit}, username) {  //怎么调用， store.dispatch('toLogin');
      let res = await login(username);
      if (res.code === 0) { //成功登录
        //提交到vuex
        commit('setUser', res.username);
        //登录成功后，将token保存到客户端(浏览器)上,每次请求时带上token,服务端校验token,
        //如果token不正确或者过期，相当于没登录
        setLocal('token', res.token);
      } else {
        //返回的失败的promise
        return Promise.reject(res.data);
      }
    },
    async toValidate() {
      let res = await validate();
      if (res.code === 0) {
        //提交到vuex
        commit('setUser', res.username);
        setLocal('token', res.token);
      } 
      return res.code === 0; //返回用户是否失效
    }
  }
})

2.在main.js中，调用store.js中的方法

main.js:

import router from './router'
import store from './store'

//每个页面都要调用
router.beforeEach(async (to, from, next) => {
  //调用store.js里面的toValidate方法
  let isLogin = await store.dispatch('toValidate');
  next();
})

3.在普通的 .vue页面中，调用store.js中的方法

在 Login.vue 页面中，去调用 store.js中的方法：

Login.vue:

<template>
  <div class="login">
    <h1>This is an Login page</h1>
    <Input type="text" placeholder="请输入用户名" style="width: 300px;" v-model="username" />
    <Button type="primary" @click="login()" >登录</Button>
  </div>
</template>

<script>
  //mapActions是vuex里面的辅助函数
  import {mapActions} from 'vuex';
  export default {
    data() {
      return {
        //v-model里面的变量，在data里面要声明一下
        username: ''
      }
    },
    methods: {
      ...mapActions(['toLogin']),
      login(){
        //拿到toLigin方法
        this['toLogin'](this.username).then(data => {
          //成功后，跳转到首页
          this.$router.push('/');
        }, err => {
          //失败了，调用iview里面的组件$Message
          this.$Message.error(err);
        });
      }
    }
  }
</script>

4.在普通的 .vue页面中，调用store.js中的公共属性

在Home.vue中，调用store.js中的公共属性：

<template>
  <div class="home">
    当前登陆用户名： {{$store.state.username}}
  </div>
</template>

总结

页面里去调用dispatch方法，派发到actions里面，然后在actions里面，再commit()提交到
mutations，然后在mutations里面去修改状态。