了解Vuex
在Vue中，多组件的开发给我们带来了很多的方便，但同时当项目规模变大的时候，多个组件间的数据通信和状态管理就显得难以维护，Vuex就此诞生！应用统一的方式进行处理，在后期维护的过程中数据的修改和维护就变得简单而清晰了。用户界面负责触发动作（Action)进而改变对应状态（State），从而反映到视图（View）上。
安装:npm install --save vuex
引入
import Vue from 'vue';
import Vuex from 'vuex';
//模块化编程，这一句是必须的
Vue.use(Vuex)
State
State负责存储整个应用的状态数据,使用this.$store.state直接获取状态
export default new Vuex.Store({
state: {
//state定义状态的值,可以理解为定义了各个变量
"name":"子圆",
"age":"18",
"sex":"男",
}
}
store可以理解为一个容器，包含着数据中的state等
Vuex.Store({
state,
actions,
mutation
});
Mutations (Vuex提供的修改状态值的方法,只能是提交mutation)
changeName(state,preload){},接收两个参数，state和载荷(这个值是可以通过提交mutations时传入)这里面不允许做异步操作。
export default {
changeName(state, preload) {
state.name = preload.name;
state.age = preload.age;
},
changeAge(s, p) {
s.age = p;
},
}
Actions
Actions也可以用于改变状态，不过是通过触发mutation实现的，重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类似，也是绑定在组件的methods上的。如果选择直接触发的话，使用this.$store.dispatch(actionName)方法。
methods:{
onClick(){
//通过this.$store.commit提交mutations,第一个参数为mutations的名字，第二个参数为提交的载荷
//this.$store.commit("changeName",{name:'子圆3',age:'38'});
//分发action
this.$store.dispatch("actionName");
}
}
Getters
vuex版的计算属性
getters:{
//vuex版的计算属性
personInfo(state){
return state.name+"的年龄是"+state.age+"岁";
}
}
