Vuex是什么?
官方文档是这样说的:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
这样看上去好像很难理解,那我们可以这样理解:
Vuex是一个仓库,我们首先是把运来的所有数据放进仓库里。
这样我们去获取数据就不用再去运数据了。直接从仓库里面拿数据就可以了。
其本质就是:
vuex就是在vue中创建全局变量的东西
vuex提供了一些优雅的方法,可以让我们改变全局变量的值
安装Vuex
npm install vuex --save
在src文件目录下手动创建目录文件store,
在store文件创建store.js
store.js的内容
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//在state中声明全局变量,可以通过this.$store.state来访问
state:{
count:0
},
//在getters中声明state中变量的计算函数,缓存计算后的数据,通过this.$store.getters来访问
getters:{
//接受state作为参数,每次count 发生变化时,都会被调用
consoleCount:state=>{
console.log('the state count :' +state.count)
}
},
//只能执行同步方法,不要去执行异步方法 通过this.$store.commit方法去调用
mutations :{
//改变state状态的方法,不建议直接通过
//this.$store.state.?=?的方式改变state中的状态
addCount:state=>{
++state.count;
},
//mutations的第一个参数即为state对象,并且可以向mutations传递额外的参数
addNumCount:(state,n)=>{
state.count+=n;
}
},
//借助actions的手去执行mutations,通过this.$store.dispatch的方式调用
//可以执行异步操作,可以跟踪异步数据的变化。
actions:{
addCount :context=>{
//调用mutations
context.commit('addcount');
},
addNumCount:context=>{
context.commit('addNumCount',n);
}
}
})
在src下的main.js
import store from './store/store.js'
new Vue({
el: '#app',
router,
store
components: { App },
template: '<App/>'
})