[vuex]

1. 需求：

数据 多组件共享

2. 涉及：

数据定义 - /vuex/store/

index.js

• /**
   * @file  /vuex/store/index.js
   * @author v_wangyuan01
   */
  import Vue from ‘vue‘;
  import Vuex from ‘vuex‘;
  
  import mutations from ‘./mutations‘;
  import actions from ‘./actions‘;
  import getters from ‘./getters‘;
  
  Vue.use(Vuex);
  export default new Vuex.Store({
      state: { // 状态机 - 数据多组件共享
          userInfo: {
              userName: ‘‘,
              isLogin: false
          }
      },
      actions, // 行为『检查用户是否登录 isUserLogin』
      mutation, // 执行 如果用户登录， 写入 true; 否则写入 false
      getters
  });

mutation-type.js // actions.js 和 mutations.js 的通信约定

• /**
   * @file  封装
   * @author v_wangyuan01
   */
  export const CHANGE_CUR_USER_NAME = ‘change_cur_user_name‘;

mutations.js // 执行 修改 状态机的数据    mutation 修改 index.js 中的 state

• /**
   * @file  公用函数
   * @author v_wangyuan01
   */
  import {
      CHANGE_CUR_USER_NAME
  } from ‘./mutation-type‘;
  
  export default {
      [CHANGE_CUR_USER_NAME](state, {userName}) {
          state.userInfo.userName = userName;
      }
  };

actions.js // 行为 触发 执行     acttion 触发 mutation

• /**
   * @file  封装
   * @author v_wangyuan01
   */
  import {
      CHANGE_CUR_USER_NAME
  } from ‘./mutation-type‘;
  
  export default {
      changeCurUserName({commit}, {userName}) {
          commit(CHANGE_CUR_USER_NAME, {userName}); // commit(行为类型，给 mutation 的值)
      },
      // this.$store.dispatch("changeCurUserName", {})
  };

getters.js

• export default {
  };

数据调用 - 在组件中 ...mapState({})

•         import {mapState} from ‘vuex‘;
  ... ...
          computed: {
              ...mapState({
                  userInfo: state => state.userInfo
              })
          },
  ... ...
          mounted: {console.log(this.userInfo.userName);}

2.

3.

4.

[vuex]

原文：https://www.cnblogs.com/mailyuan/p/11811667.html