Nuxt使用Vuex的方法示例

2020-06-13 10:32:01易采站长站整理

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

现在我们可以在组件里面通过

this.$store
来使用状态树


<template>
  <button @click="$store.commit('increment')">{{ $store.state.counter }}</button>
</template>

模块方式

状态树还可以拆分成为模块,

store
目录下的每个
.js
文件会被转换成为状态树指定命名的子模块

使用状态树模块化的方式,

store/index.js
不需要返回 Vuex.Store 实例,而应该直接将
state
mutations
actions