Vuex的使用

了解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+"岁";
      }
    }