标签：而不是 getters 用户信息 目录结构 div lan admin const 数据
1.如何使用vuex来保存数据（需要传参的情况下）
实例说明：登录->缓存用户信息->跳转到首页->从state获取用户信息显示在页面上
step1: 新建store.js作为初始化vuex的主文件，可在里面创建state对象，缓存数据字段，初始化vuex， 目录结构如下：
store.js代码如下：
1 import Vue from ‘vue‘; 2 import Vuex from ‘vuex‘; 3 import * as actions from ‘./actions‘; 4 import * as getters from ‘./getters‘; 5 import * as mutations from ‘./mutations‘; 6 7 Vue.use(Vuex); 8 9 // 应用初始状态 10 const state = { 11 userMsg: { 12 userName: ‘‘ 13 }, 14 }; 15 16 // 创建 store 实例 17 export default new Vuex.Store({ 18 state, 19 actions, 20 getters, 21 mutations: mutations.default //注意一定要写default,否则引用不到 22 });
step2: 编写mutations，改变state里的数据就靠它了。只能同步操作
const mutations = { USERMSG (state, msg){ state.userMsg = msg; }, }; export default mutations;
step3: 编写actions，Action 提交的是 mutation，而不是直接变更状态。支持异步操作，具体可见官网介绍。
export const updateUserMsg = ({ commit }, msg) => {
commit(‘USERMSG‘, msg);
};
需要传参的地方， 你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）。这个地方坑了我很久，是我太菜，哎~~~
step4: 编写getters，可以对 state 中的数据做一些处理。
export const updateUserMsg = state => { return state.userMsg == "" ? ‘admin‘ : state.userMsg; };
step5: 分发调用，使用this.$store.dispatch（’actions中的方法名‘， ’参数‘），参数一般传对象
this.$store.dispatch(‘updateUserMsg‘, { userName: this.userName });
标签：而不是 getters 用户信息 目录结构 div lan admin const 数据
原文地址：http://www.cnblogs.com/zxx-fly/p/7091577.html
