你不知道的vuex ?

什么是Vuex？

来看官方介绍： > Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 > 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 > Vuex 也集成到 Vue 的官方调试工具 devtools extension， > 提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

安装：

script 引入,在进入vue.js后引入vuex会进行自动安装

    <script src="./js/vue.js"></script>
    <script src="./js/vuex.js"></script>

    NPM
    npm install vuex --save

    Yarn
    yarn add vuex

在一个模块化的打包系统中，必须通过Vue.use() 来安装

improt Vue from 'vue'
improt vuex from 'vuex'
Vue.use(vuex)

const store = new vuex.store({
    state:{
        //全局状态。
    }
});

在main.js中引入，在根组件中注入。
该store实例会注入到根组件下的任意子组件，且子组件直接使用this.$store就能访问到。

new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

核心概念：

一、State:

单一状态树

vuex使用单一状态树——用一个对象就包含了全部的应用层级的状态。至此它是唯一，一个数据源而存在。
这样，也就意味着所有的应用包含了一个store实例。

new vuex.store({
    state:{
        count:0
    }
})
//让我们在vue组件中获得vuex的状态：
const vueComponent = {
    template: '<div>{{count}}</div>',  //  0
    computed:{
        count() {
            return this.$store.state.count;
        }
    }
}

这样在$store.state.count发生变化的时候，会重新求取计算属性，并且触发关联的DOM。

mapState辅助函数：

当一个组件要获取多个状态值时，将这些状态都声名为计算属性，显的重复和冗余。
为了解决这个问题我们使用mapState辅助帮助我们生成多个计算属性，让你简单优雅。
来看：

const vueComponent{
    template:`
        <div>
            <h1>{{selfCount}}</h1>  //  0
            <h1>{{strCount}}</h1>   //  0
            <h1>{{handleCount}}</h1>   //  1
        </div>
    `,
    data(){
        retrun {
            localCount: 1
        }
    },
    computed:mapState({
        //直接获得store中的状态,可直接使用箭头函数
        selfCount:state=> state.count
        //也可以直接使用字符串传参,等效于 state=> state.count
        strCount: 'count',
        //为了能够使用`thsi`,获得该组件实例，必须使用常规函数
        handleCount(state) {
            return state.ccount + this.localCount;
        }
    })
}

当需要映射的计算属性与state的子节点名称相同时，或者要重命名时。
我们可以给mapState传入一个字符串数组。

computed:mapState([
    //this.count映射为this.$store.state.count
    'count'
])

对象展开运算符:

mapState函数返回的是一个对象。我们怎么让他与局部计算属性混合使用呢？ 这里，我们需要用工具函数件多个对象合并，传给computed。
但有了对象展开运算符。我们可以及其简化它。

computed:{
    sumCount() {
        return //
    },
    ...mapState({
        count: state=> state.count,
        strCount: 'count',
        sumLocalCount(state) {
            return this.localCount + state.count;
        }
    })
}

官方提示：
组件仍然保有局部状态使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。
虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。
如果有些状态严格属于单个组件，最好还是作为组件的局部状态。
你应该根据你的应用开发需要进行权衡和确定。

二、Getters:

有时候我们需要对store的state进行汇总/过滤。

computed:{
    doneTodosCount() {
        return this.$store.state.filter(todo=>todo.done).length;
    }
}

如果组件需要多次使用到此属性，我们要复制这个函数。或者在共享函数导出，
效果并不是很理想。
Vuex允许我们定义getters属性，它就像是 state的计算属性一样。
getters的返回值会根据它的依赖被缓存起来，一旦它的依赖值发生变法就会重新计算。
Getters接受state做为第一个参数：

const store = new vuex.store({
    state: {
        todos: [
            { id: 1, text: '...', done: true },
            { id: 2, text: '...', done: false }
        ]
    },
    getters: {
        doneTodos: state=>{
            return state.todos.filter(todo=>todo.done);
        }
    }
})

通过属性访问：

Getters会暴露store.getters对象，你可以通过这种方式访问它:

const vueComponent = {
    template:'<div></div>',
    created() {
        console.log(this.$store.getters.doneTodos)  //  { id: 1, text: '...', done: true }
    }
}

Getters也可以作为第二个参数：

getters: {
    doneTodosCount(state,getters) {
        return getters.doneTodos.length;
    }
}

在组件中使用：

const vueComponent = {
    created() {
        console.log(this.$store.getters.doneTodosCount) //   1
    },
    //使用计算属性
    computed: {
        doneTodosCount() {
            return this.$store.getters.doneTodosCount;
        }
    }
}

通过方法访问：

你也可以通过方法访问，让getters返回一个函数，来实现给getter传参。
getters: {
    getTodoById(state,getters)=>(id)=>{
        return state.todos.find(todo=> todo.id === id)
    }
}

在组件中使用：

const vueComponent = {
    created() {
        console.log(this.$store.getters.getTodoById(2))  //{ id: 2, text: '...', done: false }
    }
}

mapGetters辅助函数：

mapGetters仅仅是将store中的getters映射到局部的计算属性中

import { mapGetters } from 'vuex';
export default {
    computed:{
        ...mapGetters([
            'doneTodosCount',
            'doneTodos'
        ])
    }
}

如果你想起一个别名，

computed: {
    ...mapGetters({
        //把this.doneCount映射为，this.$store.getters.doneTodosCount
        doneCount: 'doneTodosCount'
    })
}

这里需要注意的是，使用对象展开符号后，并不能像mapState使用常规函数，仅仅重命名。

三、Mutation:

更改vuex的store中的唯一方法是提交mutation。vuex中的mutation非常类似于事件：每个
mutation都有一个字符串的类型事件(type)和一个回调函数(handler)。
这个回调函数就是我们实际进行状态更改的地方，并且它会接收state作为第一个参数：

const = store new vuex({
    state: {
        count:0
    },
    mutations: {
        increment(state) {
            state.count++
        }
    }
})

这里你不能直接调用mutations 的handler，这个更像是事件注册：当触发一个类型为increment
的 mutations时，调用函数。当要唤醒mutations的事件时我们需要用store.commit()方法：

const vueComponent = {
    created() {  //参考
        this.store.commit('increment');
    }
}

提交载荷：

你可以向store.commit()传入额外参数，即mutations的载荷：

const store = new vuex({
    ...
    mutations: {
        increment(state,num){
            state.count + num;
        }
    }
})

组件中提交：

   this.store.commit('increment',10)

在大多数情况下载荷应该时一个对象，这样包含对个字段并记录的mutations会更易读：

  mutations: {
        increment(state,payload){
            state.count+payload.amount
        }
    }

组件中提交：

   this.store.commit('increment',{
        amount: 10
    })

对象风格的提交方式
提交mutations的另一种方式直接包含type属性

   store.commit({
        type: 'increment',
        amount: 10
    })

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

mutations: {
    increment (state, payload) {
        state.count += payload.amount
    }
}

辅助函数mapMutations:

同样的你可以时使用辅助函数：

methosd:{
    ...mapMutations([
        'increment'  //将this.increment()映射为this.store.commit('increment') 它也可以提交载荷this.increment(amount);
    ]),
    ...mapMutations({
        add: 'increment'   //将this.increment()映射为this.store.commit('increment') 
    })
}

**一条重要的原则就是要记住 mutation 必须是同步函数，详情请参考官方。**

四、 Action:

Action类似与mutations，不同在于：
Action提交的是mutations，而不是直接更改state.
Action可以包含任意的异步操作。
我们来注册一个 简单的Action

const store = new Vuex({
    state:{
        count:0
    },
    mutations:{
        increment(state){
            state.count++;
        }
    },
    actions: {
        increment(countext){
            countext.commit('increment')
        }
    }
})

Actions函数接受一个与store实例具有相同方法和属性的context对象,
因此你可以context.commit() 提交一个mutations。
或者通过context.getters和context.state。来获取他们。
实际中我们可以通过es5来简化它：

actions: {
    increment( { commit } ){
        commit('increment');
    }
}

使用Actions:

this.$store.dispatch('increment')

actions同mutations支持载荷对象提交方式:

1载荷:

this.$store.dispatch('increment',{
    sum:10
})

2以对象形式

this.$store.dispatch({
    type: 'increment',
    sum:10
})

它也异步调用API,和多重的mutations。包括同级的actions的dispatch。

mapActions辅助函数:

const vueComponent = {
    methods: {
        ...mapActions([
            'increment'   //this.increment映射为 this.$store.dispatch('increment');
        ]),
        ...mapActions({
            post: ''increment'   //将 this.post 映射为 this.$store.dispatch('increment');
        })
    }
}