首页 > 代码库 > vue项目实战爬坑小记002

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