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

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

10年积累的成都网站设计、做网站、成都外贸网站建设公司经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有鲁山免费网站建设让你可以放心的选择与我们合作。

基础知识这里不再重述,学习的话请自行到官网学习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

当前名称:Nuxt使用Vuex的方法示例-创新互联
URL分享:http://myzitong.com/article/ecoci.html