

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

我们到底什么时候使用Vuex?如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。您的应用够简单,您最好不要使用 Vuex,它适合在大型前端应用中由于多处组件公用数据源的场景
1、安装
npm install --save vuex
2、新建一个store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
//共享状态
state: {
count: 0,
list:null
},
getters:{
取前三个数据
listFilter(state){
return state.list.filter((item,index)=>index<3)
}
}
mutations: {
//唯一修改状态地方(可以监控)
updateCount (state,data) {
state.count=data
},
increment(state,data) {
state.list=data
}
},
actions: {
//异步处理
getList (store) {
axios({}).then(res=>{
store.commit('increment',res.data)
})
}
}
})
3、在main.js引入
import store from './store'
new Vue({
el: '#app',
store
})
获取状态
this.$store.state.count
修改状态
this.$store.commit(updateCount,10)
调用异步处理
this.$store.dispatch("getList")