用vuex实现两组件动态交互

使用场景：在一个组件中操作数据（添加或删除）的变化，另一个组件通过此数据动态渲染页面，如果两组件是父子组件关系或者兄弟组件关系直接传值即可，但是如果两个组件毫无关系，这就需要用到vuex，这里我用modelList举例

首先创建一个store.js分一个module来定义公共数据modelList,mutations放改变state中的数据modelList的方法，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，如果在组件中直接修改store的数据会报错

export const state = {
  modelList: sdLocalStorage.getItem('modelList')
    ? JSON.parse(sdLocalStorage.getItem('modelList'))
    : [
        { name: '领导待办', showCode: 'leader100', width: '100%' },
        { name: '我的关注', showCode: 'my50L', width: '50%' },
        { name: '日程安排', showCode: 'my50R', width: '50%' },
      ],
}
export const mutations = {
  setModelList(state, newModelList) {
    state.modelList = newModelList
    sdLocalStorage.setItem('modelList', JSON.stringify(newModelList))
  },
}

然后在操作数据的组件中可以定义一个modelList，在created的钩子函数里赋值vuex中的modelList

created() {
    this.initModel()
  },

 methods: {
  initModel() {
      this.modelList = store.state.sd.frame.modelList.slice()
      }，
   changeModel(model) {
      if (model) {
        model.modelChosen = !model.modelChosen
        if (model.modelChosen) {
          this.modelList.push({ name: model.name, showCode: model.showCode, width: model.width })
        } else {
          this.modelList.splice(
            this.modelList.findIndex((item) => item.name === model.name),
            1
          )
        }
      }
      store.commit('sd/frame/setModelList', this.modelList.slice())
}

因为提前封装好了store,所以这里直接写store，平时项目练习使用this.$store，changeModel方法用来操作this.modelList,然后将最新的modelList更新赋值给vuex中的modelList

然后在接受数据渲染页面的组件中使用computed和watch来监听和更新最新的vuex值

 computed: {
    getModelList() {
      return store.state.sd.frame.modelList
    },
  },
  watch: {
    getModelList(val) {
      this.modelList = val
    },
  },

这样就可以实时动态获取到最新的vuex的值来实现两组件的动态交互