Vuex

Vues是什么

一个专为Vue.js应用程序开发的状态管理模式
state:驱动应用的数据源
view:以声明方式将state映射到视图
actions:响应view上用户输入导致的状态变化

单向数据流

State->View->Actions->State
多组件共享状态，单向数据流简洁很容易破坏，因此，将组件共享状态抽取出来，以一个全局单例模式管理

组件树构成一个巨大视图，不管在树哪个位置，任何组件都能获取状态或触发行为(听起来敲棒棒哒)

vuex更适合中大型SPA应用

store(仓库)

vuex应用的核心，一个容器，包含应用中大部分state

vuex和全局对象的区别

1.vuex状态存储是响应式，store中状态变化，相应组件更新
2.不能直接改变store中状态，除非显示提交(commit)mutation

var store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment: function (state) {
            state.count++;
        }
    }
});

//约定,通过显示调用提交mutation方式,明确追踪状态变化
store.commit("increment");
alert(store.state.count);

核心概念

State, Getter, Mutation, Action, Module

State

Vuex使用单一状态树，用一个对象包含全部应用层级状态，作为唯一数据源(SSOT)存在，每个应用仅包含一个store实例

<counter></counter>

var store = new Vuex.Store({
    //暴露为store.state.xxx
    state: {
        count: 0
    }
});

var Counter = {
    template: "<div>{{count}}</div>",
    computed: {
        //在计算属性中返回store.state值
        count: function () {
            //子组件能通过this.$store访问
            return this.$store.state.count;
        }
    }
};

var app = new Vue({
    el: "#app",
    //根实例中注入store实例,该实例会注入所有子组件中
    store: store,
    components: {Counter: Counter}
});

mapState辅助函数帮助我们生成计算属性

var Counter = {
    data: function () {
        return {localCount: 6};
    },
    template: "<div>{{count}}-{{countAlias}}-{{countPlusLocalState}}</div>",
    computed: Vuex.mapState({
        count: function (state) {
            return state.count;
        },
        //等同于上
        countAlias: "count",
        countPlusLocalState: function (state) {
            return state.count + this.localCount;
        }
    })
};

Getter

可对state做额外处理后返回想要的数据

var store = new Vuex.Store({
    //暴露为store.getters.xxx
    getters: {
        doneTodos: function (state) {
            return state.todos.filter(function (todo) {
                return todo.done;
            });
        },
        doneTodosCount: function (state, getters) {
            return getters.doneTodos.length;
        }
    }
});

var Counter = {
    template: "<div>{{count}}</div>",
    computed: {
        count: function () {
            return this.$store.getters.doneTodosCount;
        }
    }
};

mapGetters辅助函数将store中getter映射到局部计算属性

var Counter = {
    template: "<div>{{count}}</div>",
    computed: Vuex.mapGetters({
        count: "doneTodosCount"
    })
};

Mutation

更改Vuex的store中的状态的唯一方法是提交mutation，mutation非常类似事件，包含一个事件名，一个回调，通过store.commit提交该事件
mutation遵守Vue响应规则
1.提前在store中初始化所有属性
2.添加新属性时：使用Vue.set(obj, 'newProp', 123)或
state.obj = {...state.obj, newProp:123};
mutation必须是同步函数

var store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        //变更状态
        increment: function (state, payload) {
            state.count += payload.amount;
        }
    }
});

//1
console.log(store.state.count);
//唤醒一个mutation handler,调用相应type,提交载荷
store.commit("increment", {amount: 10});
//11
console.log(store.state.count);
//commit对象风格提交方式
store.commit({type: "increment", amount: 10});
//21
console.log(store.state.count);

使用常量代替mutation事件类型

export const SOME_MUTATION = 'SOME_MUTATION';

import {SOME_MUTATION} from "...."
const store = new Vuex.Store({
    state:{...},
    mutations:{
      [SOME_MUTATION](state){...}
    }
});

可以在组件中使用this.$store.commit('xxx')提交mutation，或使用mapMutations辅助函数

Action

类似mutation，区别：
1.Action提交的是mutation，而不是直接变更状态
2.Action可以包含任意异步操作
3.通过store.dispatch('xxx')触发

var store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment: function (state) {
            state.count++;
        }
    },
    actions:{
        //传入一个与store实例有相同方法和属性的context参数
        increment:function(context){
            //context.state
            //context.getters
            //context.commit
            context.commit('increment');

            //返回一个Promise对象
            //return new Promise();
        }
    }
});
//分发
store.dispatch('increment');
//store.dispatch('increment').then(...);

Module

单一状态树会将所有状态集中到一个大的对象，为避免store臃肿，将store分割成模块(module)

var moduleA = {
    state: {v: 0},
    mutations: {
        increment: function (state) {
            state.v++;
        }
    },
    actions: {},
    getters: {}
};

var moduleB = {
    state: {v: 1},
    mutations: {}
};

var store = new Vuex.Store({
    state: {v: 3},
    modules: {
        a: moduleA,
        b: moduleB
    }
});

alert(store.state.a.v); //0 moduleA状态
alert(store.state.b.v); //1 moduleB状态
store.commit('increment');
alert(store.state.a.v); //1 moduleA状态
alert(store.state.v); //3 moduleA状态