vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。比如:我们有几个页面要显示用户名称和用户等级,或者显示用户的地理位置。如果我们不把这些属性设置为状态,那每个页面遇到后,都会到服务器进行查找计算,返回后再显示。在中大型项目中会有很多共用的数据,所以vue给我们提供了vuex。
一,安装及引入vuex
1,安装
npm install vuex --save
2,新建store.js
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state={ count:1}const mutations={ add(state,n){ state.count+=n; }, reduce(state){ state.count--; }}export default new Vuex.Store({ state,mutations})
3,在vue模板中引用store.js
1 2311 12{ {msg}}
4
5{ {$store.state.count}}
67 8 910