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