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

vue项目实战爬坑小记002

2024-10-13 12:13:02   214人阅读

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


联系
我们