vuex 存值 及 取值 的操作

1.傳值

// 定義參數
let params = {
  workItemId: workItemId,
  flowInstId: flowInstId,
  itemStatus: itemStatus,
  type: type,
  srcId: srcId
}
// 保存參數
this.$store.dispatch('approvalConfirmParams', params);

2.vuex

（1）index.js

/**
 * 步驟一
 * vuex 入口文件
 */
// 引入 vue
import Vue from 'vue'
// 引入 vuex
import Vuex from 'vuex'

import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex);

// 導出
export default new Vuex.Store({
  modules:{
    mutations
  },
  actions
});

（2）types.js

/**
 * 步驟二
 * 狀態(類型)
 */
// 審批歷史頁請求參數
export const APPROVAL_HISTORY_PARAMS = 'APPROVAL_HISTORY_PARAMS';

（3）actions.js

/**
 * 步驟三
 * 管理事件(行為)
 */
// 引入 狀態(類型),用於提交到mutations
import * as types from './types'

// 導出
export default {
  // 保存 請求參數 approvalHistoryParams為上面的"action名"
  approvalHistoryParams: ({commit}, res) => {
    // 此處是觸發mutation的 STORE_MOVIE_ID為"mutation名"
    commit(types.APPROVAL_HISTORY_PARAMS, res);
  }
}

（4）mutations.js

/**
 * 步驟四
 * 突變(處理狀態改變)
 */
import {
  APPROVAL_HISTORY_PARAMS // 審批歷史參數
} from './types'

// 引入 getters
import getters from './getters'

// 定義、初始化數據
const state = {
  approvalHistoryParams:{}
}

// 定義 mutations
const mutations = {
  // 匹配actions通過commit傳過來的值,並改變state上的屬性的值
  // 審批歷史頁 請求參數
  [APPROVAL_HISTORY_PARAMS](state, res){
    state.approvalHistoryParams = res;   //state.數據名 = data
  }
}

// 導出
export default {
  state,
  mutations,
  getters
}

（5）getters.js

/**
 * 步驟五
 * 獲取數據
 */
// 導出
export default {
  // 獲取 審批歷史參數
  approvalHistoryParams: (state) => {
    return state.approvalHistoryParams;
  }
}

3.取值

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([//...函數名 使用對象展開運算符將此對象混入到外部對象中
      'approvalHistoryParams'
    ])
  },
  methods: {
    fetchData(){
      console.log(this.approvalHistoryParams.name);
    }
  }
}

注：

dispatch：含有異步操作，例如向后台提交數據，寫法： this.$store.dispatch('mutations方法名',值)

commit：同步操作，寫法：this.$store.commit('mutations方法名',值)