存值

methods: {
	save () {
		this.$store.commit('getList', data);
	}
}

取值

methods: {
	value () {
		this.$store.state.handle.list.data;
	}
}

store的index.js中

import Vue from 'vue'
import Vuex from 'vuex'
import handle from './handle'

Vue.use(Vuex)

export default new Vuex.Store({
	// 数据
	state: {
	
	},
	// 改变state中变量的方法,mutations是改变state数据的唯一途径,commit()
	mutations: {

	},
	 // 做逻辑操作,计算、发送ajax,dispath()
	actions: {
	
	},
	// 根据state中的数据,计算数据
	getters: {
	
	},
	modules: {
		handle
    }
})

store的handle.js中

let state = {
	list: []
}

let mutations = {
	getList (state, info) {
		state.list = info
	}
}

export default {
    state: state,
    mutations


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);
    }
  }
}
Logo

前往低代码交流专区

更多推荐