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