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方法名',值)