Vuex 状态树分析

发布时间：2023-04-14 13:08:44 所属栏目：教程来源：

导读：对于每个大项目来说，使用状态树 (store) 管理状态 (state) 十分有必要。这就是为什么 Nuxt.js 内核实现了 Vuex。

使用状态树

Nuxt.js 会尝试找到src目录（默认是应用根目录）下的 store 目录，如果该目录存在

对于每个大项目来说，使用状态树 (store) 管理状态 (state) 十分有必要。这就是为什么 Nuxt.js 内核实现了 Vuex。

使用状态树

Nuxt.js 会尝试找到src目录（默认是应用根目录）下的 store 目录，如果该目录存在，它将做以下的事情：

引用 vuex 模块

将 vuex 模块加到 vendors 构建配置中去

设置 Vue 根实例的 store 配置项

Nuxt.js 支持两种使用 store 的方式，你可以择一使用：

模块方式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块（当然，index 是根模块）

Classic(不建议使用)： store/index.js返回创建Vuex.Store实例的方法。

无论使用那种模式，您的state的值应该始终是function，为了避免返回引用类型，会导致多个实例相互影响。

普通方式

Nuxt.js允许您拥有一个 store 目录，其中包含与模块对应的每个文件。

首先，只需将状态导出为函数，将变量和操作作为 store/index.js 中的对象导出：

export const state = () => ({
counter: 0
})

export const mutations = {
increment (state) {
state.counter++
}
}
然后，您可以拥有 store/todos.js 文件：

export const state = () => ({
list: []
})

export const mutations = {
add (state, text) {
state.list.push({
text,
done: false
})
},
remove (state, { todo }) {
state.list.splice(state.list.indexOf(todo), 1)
},
toggle (state, todo) {
todo.done = !todo.done
}
}
Vuex将如下创建：

new Vuex.Store({
state: () => ({
counter: 0
}),
mutations: {
increment (state) {
state.counter++
}
},
modules: {
todos: {
namespaced: true,
state: () => ({
list: []
}),
mutations: {
add (state, { text }) {
state.list.push({
text,
done: false
})
},
remove (state, { todo }) {
state.list.splice(state.list.indexOf(todo), 1)
},
toggle (state, { todo }) {
todo.done = !todo.done
}
}
}
}
})
在您的 pages/todos.vue 中，使用 todos 模块：

<template>
<ul>
<li v-for="todo in todos">
<input type="checkBox" :checked="todo.done" @change="toggle(todo)">
<span :class="{ done: todo.done }">{{ todo.text }}</span>
</li>
<li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li>
</ul>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
computed: {
todos () {
return this.$store.state.todos.list
}
},
methods: {
addTodo (e) {
this.$store.commit('todos/add', e.target.value)
e.target.value = ''
},
...mapMutations({
toggle: 'todos/toggle'
})
}
}
</script>

<style>
.done {
text-decoration: line-through;
}
</style>
模块方法也适用于顶级定义，而无需在 store 目录中实现子目录

示例：您创建文件 store/state.js 并添加以下内容

export default () => ({
counter: 0
})
相应的可以在文件夹中添加 store/mutations.js

export default {
increment (state) {
state.counter++
}
}
模块文件
您可以将模块文件分解为单独的文件：state.js,actions.js,mutations.js和getters.js。如果您使用index.js来维护state,getters,actions和mutations，同时具有单个单独的操作文件，那么仍然可以正确识别该文件。

注意：在使用拆分文件模块时，必须记住使用箭头函数功能， this 在词法上可用。词法范围this意味着它总是指向引用箭头函数的所有者。如果未包含箭头函数，那么this将是未定义的(undefined)。解决方案是使用 "normal" 功能，该功能会将this指向自己的作用域，因此可以使用。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!