vuex 存值 及 取值 的操作

// 定义参数

let params = {

  workItemId: workItemId,

  flowInstId: flowInstId,

  itemStatus: itemStatus,

  type: type,

  srcId: srcId

}

// 保存参数

this.$store.dispatch('approvalConfirmParams', params);

/**

 * 步骤一

 * 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

});

/**

 * 步骤二

 * 状态(类型)

 */

// 审批历史页请求参数

export const APPROVAL_HISTORY_PARAMS = 'APPROVAL_HISTORY_PARAMS';

/**

 * 步骤三

 * 管理事件(行为)

 */

// 引入 状态(类型),用于提交到mutations

import * as types from './types'

// 导出

export default {

  // 保存 请求参数 approvalHistoryParams为上面的"action名"

  approvalHistoryParams: ({commit}, res) => {

    // 此处是触发mutation的 STORE_MOVIE_ID为"mutation名"

    commit(types.APPROVAL_HISTORY_PARAMS, res);

  }

}

/**

 * 步骤四

 * 突变(处理状态改变)

 */

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

}

/**

 * 步骤五

 * 获取数据

 */

// 导出

export default {

  // 获取 审批历史参数

  approvalHistoryParams: (state) => {

    return state.approvalHistoryParams;

  }

}

import { mapGetters } from 'vuex';

export default {

  computed: {

    ...mapGetters([//...函数名 使用对象展开运算符将此对象混入到外部对象中

      'approvalHistoryParams'

    ])

  },

  methods: {

    fetchData(){

      console.log(this.approvalHistoryParams.name);

    }

  }

}