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.