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