javascript - 为动态创建的组件分离 vuex 存储

Question

这个问题让我有点困惑。不幸的是，我在这里找不到答案(询问也没有帮助)。因此，经过一些研究并到处询问后，我似乎找到了解决这个问题的方法。

If you have a question that you already know the answer to, and you would like to document that knowledge in public so that others (including yourself) can find it later.

当然，我的答案可能不是理想的，而且我知道不是，这就是我发帖的重点——改进它。

请注意，我在示例中没有使用操作。这个想法是一样的。

让我们首先陈述问题

想象一下我们有 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 与其存储链接起来。我们可能需要来自 vuex 的 state、getters、mutations、actions。要访问存储，我们需要创建 getter。与突变相同。

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}？当我们有多个模块并且我们知道所需模块的路径时，我们就可以做到这一点。不幸的是，我们无法访问模块名称。

The code is run when the component's module is executed (when your app is booting), not when the component is created. So these helpers can only be used if you know the module name ahead of time.

这里几乎没有帮助。我们可以将 getter 和 mutations 分开，然后将它们作为对象导入并保持干净。

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

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

返回App组件。我们必须提交mutation，并为App创建一些getter。展示我们如何访问位于模块中的数据。

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>