为动态创建的组件分隔vuex存储

Question

这个问题让我陷入了困境.不幸的是,我在这里找不到答案(要求也没有帮助).所以经过一些研究并在这里和那里询问后,似乎我得到了这个问题的解决方案.

如果您有一个问题,您已经知道答案,并且您希望公开记录这些知识,以便其他人(包括您自己)可以在以后找到它.

当然,我的答案可能不是理想的,而且我知道它不是,这是我发帖的关键点 - 改进它.

注意,我没有在示例中使用动作.这个想法是一样的.

让我们首先说明问题:

想象一下,我们有App.vue动态生成其名为的本地组件Hello.

<template>
  <div id="app">
    <div>
      <hello v-for="i in jobs" :key="i" :id="i"></hello>
      <button @click="addJob">New</button>
    </div>
  </div>
</template>   

<script>
import Hello from './components/Hello'

export default {
  components: {
    Hello
  }...

store.js

export const store = new Vuex.Store({
  state: {
    jobs: []
  }
})

我们使用v-for指令通过遍历数组来生成组件jobs.我们store现在只state包含一个空数组.按钮New应该做两件事:

1)创建新的组件Hello,换句话说添加元素jobs(让它成为数),其中将要被分配为key和id的<hello>,并传递到本地部件如props.

2)生成本地存储 - 模块 - 以保持任何数据作用于新创建的组件.

Hello.vue

<template>
  <div>
    <input type="number" :value="count">
    <button @click="updateCountPlus">+1</button>
  </div>
</template>

export default {
  props: ['id']
}

简单组件 - 使用添加1的按钮输入.

我们的目标是设计这样的东西:

Answer 1

对于NEW按钮生成组件的第一个操作- 我们添加mutation到我们的store.js

 mutations: {
    addJob (state) {
      state.jobs.push(state.jobs.length + 1)
...
}

第二,创建本地模块.这里我们将用于reusableModule生成模块的多个实例.该模块我们保存在单独的文件中以方便.另外,请注意使用函数来声明模块状态.

const state = () => {
  return {
    count: 0
  }
}

const getters = {
  count: (state) => state.count
}

const mutations = {
  updateCountPlus (state) {
    state.count++
  }
}

export default {
  state,
  getters,
  mutations
}

要使用reusableModule我们导入它并应用动态模块注册.

store.js

import module from './reusableModule'

const {state: stateModule, getters, mutations} = module

export const store = new Vuex.Store({
  state: {
    jobs: []
  },
  mutations: {
    addJob (state) {
      state.jobs.push(state.jobs.length + 1)
      store.registerModule(`module${state.jobs.length}`, {
        state: stateModule,
        getters,
        mutations,
        namespaced: true // making our module reusable
      })
    }
  }
})

之后,我们将Hello.vue与其存储相关联.我们可能需要state,getters,mutations,actions从vuex.要访问存储,我们需要创建我们的getters.与...相同mutations.

Home.vue

<script>

export default {
  props: ['id'],
  computed: {
     count () {
        return this.$store.getters[`module${this.id}/count`]
     }
  },
  methods: {
    updateCountPlus () {
        this.$store.commit(`module${this.id}/updateCountPlus`)
     } 
  }
}
</script>

想象一下,我们有很多getters,mutations和actions.为什么不使用{mapGetters}或{mapMutations}？当我们有几个模块并且我们知道所需模块的路径时,我们就可以做到.不幸的是,我们无法访问模块名称.

代码在组件的模块执行时(应用程序启动时)运行,而不是在创建组件时运行.因此,只有在提前知道模块名称时才能使用这些助手.

这里几乎没有帮助.我们可以分开我们getters和mutations,然后导入它们作为一个对象,并保持清洁.

<script>
import computed from '../store/moduleGetters'
import methods from '../store/moduleMutations'

export default {
  props: ['id'],
  computed,
  methods
}
</script>

回到App组件.我们有我们的承诺mutation,也让我们创造出一些getter对App.展示我们如何访问位于模块中的数据.

store.js

export const store = new Vuex.Store({
  state: {
    jobs: []
  },
  getters: {
    jobs: state => state.jobs,
    sumAll (state, getters) {
      let s = 0
      for (let i = 1; i <= state.jobs.length; i++) {
        s += getters[`module${i}/count`]
      }
      return s
    }
  } 
...

完成App组件中的代码

<script>
import Hello from './components/Hello'
import {mapMutations, mapGetters} from 'vuex'

    export default {
      components: {
        Hello
      },
      computed: {
        ...mapGetters([
          'jobs',
          'sumAll'
        ])
      },
      methods: {
        ...mapMutations([
          'addJob'
        ])
      }
    }
    </script>