定义
vuex官方解释
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
个人理解：
vuex就是一个vue内部的一个容器，他定义了要存储哪些数据，给出这些数据的操作方法，供其他的组件调用，很像一个类。
什么时候使用VueX
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
安装
- 脚手架创建项目直接勾选
- npm或yarn安装
npm install vuex@next --save
yarn add vuex@next --save
配置
新建store文件 index.js 在main.js中引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//数据，相当于data
state: {
},
getters: {
},
//里面定义方法，操作state方发
mutations: {
},
// 操作异步操作mutation
actions: {
},
modules: {
},
})
核心概念
1.state
提供唯一公共数据源，类似data
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//数据，相当于data
state: {
name:"张三",
age:12,
count:0
},
})
2.Mutation
定义state中的数据的更改方法
使用commit出发mutation操作
methods:{
//加法
btn(){
this.$store.commit("addcount",10) //每次加十
}
//减法
btn1(){
this.$store.commit("reduce")
}
}
使用辅助函数进行操作
methods:{
...mapMutations(["addcount","reduce"])
btn(){
this.addcount(10);}
btn1(){
this.reduce();
}
}
3.Action异步操作
4.Getter
类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据
5.Modules
