vuex基本使用流程

一、配置Vuex

1、安装Vuex

npm install vuex --save  
# 或者  
yarn add vuex

2、创建Store文件夹

创建store管理所有共享的状态，这个store通常包含state、mutations、actions、getter等部分

• state：定义状态
• mutations：定义修改状态的函数
• actions：定义异步操作，可以包含多个mutation
• getters：定义计算属性，基于state派生一些状态

3、在Vue实例中使用Store（通常在main.js中）

import Vue from 'vue';  
import App from './App.vue';  
import store from './store';  
  
new Vue({  
  store,  
  render: h => h(App),  
}).$mount('#app');

二、使用Vuex

1、分模块来便于管理（大哥和它的小弟）

大哥：安装和启用Vuex插件

例：

小弟：写state、mutations、actions、getter等部分，来完成关于其部分的数据的存储

注：小弟们不需要再安装和启用Vuex插件，因为有他们大哥“罩”着他们

例：

const user = {  
  namespaced: true,  //启用了命名空间，访问该模块中的状态或调用其 mutation、action、getter 时，模块名作为命名空间的前缀被添加到了模块内部所有元素的名称之前
  state: {  
    // 定义状态  
  },  
  mutations: {  
    // 定义修改状态的函数  
  },  
  actions: {  
    // 定义异步操作，可以包含多个mutation  
  },  
  getters: {  
    // 定义计算属性，基于state派生一些状态  
  }  
};

2、在组件中实际运用

1、在组件中提交

两种提交：
1、// 在组件中调用这个 mutation，并传递参数  
this.$store.commit('setUserName', 'Alice'); 


2、这种通过actions来完成异步操作
this.$store.dispatch('user/fetchUserData', 123); // 假设 123 是用户的 ID
//user是这个模块的名字
//fetchUserData是对应模块actions中要操作该数据的方法名
//123是要存储的数据

2、在store（user.js）里 

第一种提交：(只涉及state和mutations)

const store = new Vuex.Store({  
  state: {  
    userName: ''  
  },  
  mutations: {  
    setUserName(state, userName) {  
      state.userName = userName;  
    }  
  }  
});  
  

第二种提交： （在actions里经过一些异步操作后，提交到mutations中，最后改变state中对应的状态）

const store = new Vuex.Store({  
  state: {  
    userName: '',  
    token: null  
  },  
  mutations: {  
    // 设置用户名  
    setUserName(state, userName) {  
      state.userName = userName;  
    },  
    // 设置 token  
    setToken(state, token) {  
      state.token = token;  
    }  
  },  
  actions: {  
    // 假设我们有一个异步操作，比如从服务器获取用户名和 token  
    fetchUserData({ commit }, userId) {  
      // 这里只是一个模拟的异步操作  
      setTimeout(() => {  
        // 假设这是从服务器获取的数据  
        const userName = 'Alice'; // 实际上这里应该是根据 userId 从服务器获取的用户名  
        const token = 'some_token_here'; // 类似地，这是从服务器获取的 token  
  
        // 提交 mutations 来更新状态  
        commit('setUserName', userName);  
        commit('setToken', token);  
      }, 1000); // 假设这个异步操作需要 1 秒来完成  
    }  
  }  
});