Vuex存值与取值
存值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...
·
存值
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);
}
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)