Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
基础知识这里不再重述，学习的话请自行到官网学习https://vuex.vuejs.org/zh/
文档最后有具体使用的实例，不想看基础的就直接下调页面~
这里主要简单讲一讲Nuxt里怎么使用vuex，
Nuxt.js 内置引用了vuex模块，所以不需要额外安装。
Nuxt.js 会尝试找到应用根目录下的store目录，如果该目录存在，它将做以下的事情：
引用vuex模块
将vuex模块 加到 vendors 构建配置中去
设置Vue根实例的store配置项
Nuxt.js 支持两种使用store的方式，你可以择一使用：
普通方式
使用普通方式的状态树，需要添加store/index.js文件，并对外暴露一个 Vuex.Store 实例：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = () => new Vuex.Store({ state: { counter: 0 }, mutations: { increment (state) { state.counter++ } } }) export default store
现在我们可以在组件里面通过this.$store来使用状态树
<template> <button @click="$store.commit('increment')">{{ $store.state.counter }}</button> </template>
模块方式
状态树还可以拆分成为模块，store目录下的每个.js文件会被转换成为状态树指定命名的子模块
使用状态树模块化的方式，store/index.js不需要返回 Vuex.Store 实例，而应该直接将state、mutations和actions暴露出来：
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: 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目录中实现子目录
state 示例，您需要创建一个文件store/state.js并添加以下内容：
export default () => ({ counter: 0 })
并且相应的 mutations 在文件store/mutations.js中：
export default { increment (state) { state.counter++ } }
模块文件
您可以将模块文件分解为单独的文件：state.js,actions.js,mutations.js和getters.js。如果您使用index.js来维护state,getters,actions和mutations，同时具有单个单独的操作文件，那么仍然可以正确识别该文件。
项目结构
vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
应用层级的状态应该集中到单个 store 对象中。
提交mutation是更改状态的唯一方法，并且这个过程是同步的。
异步逻辑都应该封装到action里面。
只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。
对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：
├── index.html ├── main.js ├── api │ └── ... # 抽取出API请求 ├── components │ ├── App.vue │ └── ... └── store ├── index.js # 我们组装模块并导出 store 的地方 ├── actions.js # 根级别的 action ├── mutations.js # 根级别的 mutation └── modules ├── cart.js # 购物车模块 └── products.js # 产品模块
下面用是实例说一下怎么使用
一、在Nuxt项目的store目录下新建一个index.js文件，这样项目就启用了vuex