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