Vuex是专门为Vue.js应用开发的状态管理模式。它采用集中式存储来管理应用程序所有组件的状态，并确保状态以可预测的方式随着相应的规则而变化。

基础知识在此不再赘述。如果你学习的话，请自己去官网学习https://vuex.vuejs.org/zh/

在文档的末尾，有具体的使用示例。不想看基础的可以直接下页~

这里我们主要讲一下如何在Nuxt中使用vuex。

Nuxt.js内置了对vuex模块的引用，所以不需要额外的安装。

Nuxt.js将尝试在应用程序根目录下找到存储目录。如果目录存在，它将执行以下操作：

引用vuex模块并将vuex模块添加到供应商构建配置中，以设置VUEE根实例的存储配置项Nuxt.js。使用商店有两种方式，你可以选择一种：

普通模式：store/index.js返回一个Vuex。存储实例模块模式：每。store目录中的js文件将被转换成一个由状态树命名的子模块(当然，index是根模块)。

要使用正常状态树，需要添加store/index.js文件并公开Vuex的一个实例。商店：

从' vue '导入Vue从' Vuex '导入Vue . use(Vuex)const store=()=new Vuex。存储({ state: { counter: 0 }，Variations : { increment(state){ state })。counter}}})导出默认存储现在我们可以通过这个使用组件中的状态树。$商店

template button @ click=' $ store . submit(' increment ')' { { $ store . state . counter } }/button/template module模式

状态树也可以分成模块，每个模块。存储目录中的js文件将被转换成一个由状态树命名的子模块

通过状态树的模块化，store/index.js不需要返回Vuex。存储实例，但应该直接公开状态、突变和动作：

导出常量状态=()=({counter: 0})导出常量变量={increment (state) {state。counter}}其他模块文件需要采用类似的方法，如store/todos.js文件：

export const state=()=({ list :[]})export const突变={ add (state，text){ state . list . push({ text : text，done: false }) }，remove (state，{ todo }){ state . list . splice(state . list . indexof(todo)，1) }，toggle (state，todo) { todo.done=！在页面组件pages/todos.vue中，todos模块可以如下使用：

模板ul Li v-for=' todos中的todo '输入类型=' checkbox ' : checkly=' todo . done ' @ change=' toggle(todo)' span : class=' { done : todo . done } ' { { todo . text } }/span/Li Li输入占位符='需要做什么？'@ key up . enter=' AddToDo '/Li/ul/templatescript import { MapTextures } 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=' ' }，map突变({ toggle : ' todos/toggle ' })} }/script style . done { text-decoration : line-through；}/style模块方法也适用于顶级定义，而无需在存储目录中实现子目录

状态示例，您需要创建一个文件存储/state.js并添加以下内容：

export default()=({ count : 0 })和相应的突变都在文件存储/突变. js:

导出默认{增量(状态){状态。计数器}}模块文件

您可以将模块文件分解成单独的文件：state.js、actions.js、variations.js和getterss.js如果您使用index.js来维护state、getter、actions和variations，并且只有一个操作文件，您仍然可以正确地识别该文件。

项目结构

Vuex不会限制您的代码结构。但是，它提供了一些需要遵守的规则：

应用程序级状态应该集中在一个存储对象中。提交变异是改变状态的唯一途径，过程是同步的。异步逻辑应该封装在动作中。只要遵循以上规则，如何组织代码就看你自己的了。如果您的存储文件太大，只需将动作、突变和getter拆分成单独的文件。

对于大型应用程序，我们希望将Vuex相关代码分成模块。以下是项目结构的示例：

index.htmlAPI.#提取API请求 组件。根级动作 突变. js #根级变体 模块购物车模块产品. js #产品模块下面是一个解释如何使用它的例子

1.在Nuxt项目的存储目录下创建一个新的index.js文件，以便为该项目启用vuex

从' vue '导入Vue从' Vuex '导入Vue . use(Vuex)const store=()=new Vuex。存储({ state: { counter: 0 }，Variations : { increment(state){ state })。counter}}) Export Default Store一般我们只把这个文件作为vuex的入口文件，不在这里写业务代码。其他函数写在其他vuex文件中，所以我们可以在index中导入。

其次，在store文件夹中创建一个新的filter.js文件，并将其引入index.js来编写我们的业务代码

filter.js文件

const state=({ value : ' Hello World '，list: [1，2，3，4，5]})；const getter={ include :(state)=(val)={ return state . list . indexof(val)-1；} };常量突变={ SET_VALUE(状态，值){ state.value=value}};const actions={ async getInfo({ state，commit}，val) { commit('SET_VALUE '，val)；}};导出默认值{ namespaced: true，state，getters，actions，突变}；在此文件中输出namespace属性时，如果为true，则在使用此文件的方法时，需要标记Namespace；如果不是写的或者假的，可以直接用。这里建议使用Namespace，因为大型项目可能有很多复杂的业务，可能会有命名冲突。使用Namespace可以区分方法并避免许多问题。

Index.js文件

从“Vue”导入Vue；从“Vuex”导入Vuex；从“”导入筛选器。/filter '；vue . use(Vuex)；const store=()=new Vuex。存储({ state: { }，mutations: { }，modules : { filter } })；导出默认存储导入我们的filter.js文件中的index.js文件，然后导入到模块中使用

Iii .在vue文件中使用vuex

index.vue

模板节类=' p-10 ' h1 { { value } }/h1 h1 { { result } }/h1el-button类型=' dancer ' @ click=' change ' click/El-button/section/template script从' vuex '导入{ mapState，map突变，mapActions，mapgetter }；导出默认值{ data(){ return { result : false }；}，computed: {.mapgetter(' filter '，[ 'include' ])，mapState({ value : state=state . filter . value })}，methods: {.映射突变('过滤器'，[ 'SET_VALUE' ])，mapActions('filter '，[ 'getInfo' ])，change(){//this . result=this . include(1)；//this . getinfo(' hello ')；//这个。SET _ VALUE(' HELLO ')；} }，mounted() { }，before destroy(){ }；/script1。在vue文件中，首先通过从' vuex '导入{map state，map variations，map actions，map getters }来导入我们需要的模块，并根据需要引用它们，只需导入此页面中使用的模块即可。

2 .在页面的计算属性中需要引入2.mapGetters和mapState，在方法中需要引入MapVariations和mapActions。此时，我们应该注意模块的命名空间。如果vuex文件在导出时标记了Namespace，那么我们在使用时就需要把它写出来，否则就不需要了。

3.首先是mapState。在使用mapState的时候，我有两种方法可以得到它。两种方法都可用。这个方法是从存储中获取这个变量，并将其显示在这个页面上。如果商店发生变化，该页面也会动态变化。

.map state({ value : state=state。过滤器。值}).mapstate ('filter '，{value:state=state。值}) 4。mapgetter类似于store的计算属性，所以我们可以通过mapgetter方法在store中进行计算，然后返回我们需要的结果。

上面的例子是在点击按钮时将一个数字传递给商店，然后判断商店中的列表是否包含这个数字，然后将结果返回给页面，页面根据返回值刷新数据

5.地图突变是改变商店状态的唯一方法。Vuex中的突变与事件非常相似：每个突变都有一个事件类型的字符串和一个回调函数。这个回调函数是我们实际进行状态更改的地方，它将接受状态作为第一个参数

上面的例子是，当点击按钮时，通过突变直接修改存储中的数据，然后将数据同步到页面

6.mapAction类似于突变，但是Action提交突变而不是直接改变状态。操作可以包括任何异步操作。我们一般把异步数据获取的所有方法都放在这里，然后在回调函数中使用突变中的方法将异步获取的数据保存到存储中，然后将存储中的数据传递到页面。

上面的例子是在点击按钮的时候调用动作中的异步方法，然后在方法的回调函数中修改store的数据。一般来说，请求结果保存在这里，但是这里省略了请求API方法

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。