VUE项目中vuex的使用步骤

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
}

贴出示例打印结果：