vue项目实战爬坑小记002

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});

原标题：vue项目实战爬坑小记002

关键词：VUE