vuex请求变量后存储并使用_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方法名',值)