7.vuex

认识Vuex

背景

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

单页面状态管理

State：状态。（能够当作就是data中的属性）
View：视图层，能够针对State的变化，显示不一样的信息。
Actions：主要是用户的各类操做：点击、输入等等，会致使状态的改变。

<template>
    <div class="test">
        <div>当前计数: {{counter}}</div>
        <button @cli ck="counter+=1"> +1</button>
        <button @click="counter-=1">-1</button>
    </div>
</template>
<script>
export default {
    name: 'Helloworld',
    data () {
        return {
            counter: 0
        }
    }
}
</script>

多页面状态管理

不一样界面的Actions都想修改同一个状态,如今要作的就是将共享的状态抽取出来,交给vuex。以后，每一个组件，按照规定好的规定，进行访问和修改等操做。

Vuex状态管理图例

Vue components能够直接到mutations（可是不建议这样作）。Mutations中的操做都是同步操做，要是有异步操做就在actions中操做，操做完成以后再提交到mutations中进行同步操做。Devtools跟踪不到异步操做。
Devtools是Vue开发的一个浏览器插件，能够帮助记录每次修改state的记录

Vuex基本使用

Vuex核心概念

State

Vuex使用了单一状态树来管理应用层级的所有状态。单一状态树可以让咱们最直接的方式找到某个状态的片断，并且在以后的维护和调试过程当中，也能够很是方便的管理和维护。

Getters

相似于组件中的计算属性。当数据必须通过一系列变化以后再在页面上使用时就用到计算属性。
同理，若是是在state中的数据，须要进行操做后在页面显示，就用到getters属性。

const store = new Vuex . Store({
    state: {
        students: [
            {id: 110,name:'why',age:18},
            {id: 111,name:'kobe',age:21},
            {id: 112,name:'lucy',age:25},
            {id: 113,name:'lilei',age:30},
        ]
    },
    getters: {
        //获取学生年龄大于20的个数。
        greateragesCount: state =>{
            return state. students. filter(s => s.age >= 20) . length
        }
    }
})

Getters做为参数和传递参数

若是咱们已经有了一个获取全部年龄大于20岁学生列表的getters, 那么代码能够这样来写

getters: {
    greaterAgesstus: state => {
        return state.students.filter(s => s.age >= 20)
    },
    greateragesCount: (state, getters) => {
        return getters.greaterAgesstus.length
    }
}

getters默认是不能传递参数的, 若是但愿传递参数, 那么只能让getters自己返回另外一个函数.

Mutation

Vuex的store状态的更新惟一方式：提交Mutation
Mutation主要包括两部分：字符串的事件类型（type）;一个回调函数（handler）,该回调函数的第一个参数就是state。

Mutation状态更新

mutation的定义方式：

mutations: {
    increment(state) {
        state.count++
    }
}

经过mutation更新

increment:function() {
    this.$store.commit('increment')
}

Mutation传递参数

在经过mutation更新数据的时候, 有可能咱们但愿携带一些额外的参数。参数被称为是mutation的载荷(Payload)
当参数只有一个的时候，能够在mutation中使用参数

decrement(state,n) {
    state.count -= n;
}

decrement:function() {
    this.$store.commit('decrement',2);
}

若是参数不是一个,一般会以对象的形式传递, 也就是payload是一个对象。再从对象中取出相关的信息。

changeCount(state.pay1oad) {
    state.count = payload.count;
}

changeCount:function () {
    this.$store.commit('changeCount'，{count: 0});
}

Mutation提交风格

Vue还提供了另一种风格, 它是一个包含type属性的对象

this.$store.commit({
    type: 'changeCount'，
    count: 100
})

Mutation中的处理方式是将整个commit的对象做为payload使用, 因此代码没有改变, 依然以下:

changeCount(state,pay1oad) {
    state.count = pay1oad.count
}

Mutation响应规则

Action

Module