这个问题让我有点卡住了。不幸的是，我在这里找不到答案（问也没有帮助）。因此，在做了一些研究并到处询问之后，似乎我找到了这个问题的解决方案。
如果您有一个已经知道答案的问题，并且您 希望公开记录这些知识，以便其他人 （包括你自己）稍后可以找到它。
当然，我的答案可能不是理想的，而且我知道不是，这就是我发帖的重点——改进它。
请注意，我在示例中没有使用操作。这个想法是一样的。
让我们从陈述问题：
想象一下我们有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. Our store截至目前仅包含state与一个空数组。
按钮New应该做两件事：
1)创建新组件Hello，换句话说，将元素添加到jobs（让它成为数字），它们将被分配为key and id of <hello>，并传递给本地组件props.
2)生成本地商店 -modules- 将任何数据保留在新创建的组件范围内。
Hello.vue
<template>
<div>
<input type="number" :value="count">
<button @click="updateCountPlus">+1</button>
</div>
</template>
export default {
props: ['id']
}
简单组件 - 使用按钮加 1 进行输入。
Our goal is to design something like this:
对于第一次操作NEW按钮 -生成组件- 我们增加mutation to our store.js
mutations: {
addJob (state) {
state.jobs.push(state.jobs.length + 1)
...
}
Second, 创建本地模块。这里我们要使用reusableModule生成模块的多个实例。为了方便起见，我们将该模块保存在单独的文件中。还，注意使用函数来声明模块状态.
const state = () => {
return {
count: 0
}
}
const getters = {
count: (state) => state.count
}
const mutations = {
updateCountPlus (state) {
state.count++
}
}
export default {
state,
getters,
mutations
}
To use 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 from 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 and actions。为什么不使用{mapGetters} or {mapMutations}？当我们有多个模块并且我们知道所需模块的路径时，我们就可以做到这一点。不幸的是，我们无权访问模块名称。
该代码在执行组件的模块时运行（当您的应用程序 正在启动），而不是在创建组件时。所以这些助手可以 仅当您提前知道模块名称时才使用。
这里几乎没有帮助。我们可以分开我们的getters and mutations然后将它们作为对象导入并保持干净。
<script>
import computed from '../store/moduleGetters'
import methods from '../store/moduleMutations'
export default {
props: ['id'],
computed,
methods
}
</script>
回到App成分。我们必须承诺我们的mutation让我们创建一些getter for 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>