1.store文件下modules中定义专属状态管理js文件
const state = {
boxCardIds: []
}
const mutations = {
CHANGE_BOX_CARD_IDS: (state, action) => {
state.boxCardIds = action
}
SHIPMENT_RESET: (state) => {
state.boxCardIds = []
}
}
const actions = {
changeBoxCardIds({ commit }, playload) {
commit('CHANGE_BOX_CARD_IDS', playload)
},
shipmentReset({ commit }) {
commit('SHIPMENT_RESET')
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
2.store文件下index中定义
import Vue from 'vue'
import Vuex from 'vuex'
import shipments from './modules/shipments';
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
shipments
}
})
export default store
3.需要改变状态的组件中分发
this.$store.dispatch('shipments/changeBoxCardIds', this.multipleSelection.map(el => el.orderId))
//第二个参数为改变后的状态
4.需要使用状态的组件中调用
mounted() {
console.log(`STATE`, this.$store.state)
//打印结果STATE---shipments:{
//boxCardIds: [0: "1339080851224399872"]
}
const boxCardIds = this.$store.state.shipments.boxCardIds
}
贴出示例打印结果: