Nuxt使用Vuex的方法示例-创新互联

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 实例
• 模块方式：store目录下的每个.js文件会被转换成为状态树指定命名的子模块（当然，index是根模块）

普通方式

使用普通方式的状态树，需要添加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