Vuex使用

Vuex是什么？

:::success Vuex是一个专门为Vue.js应用程序开发的状态管理模式。 :::

语法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state:{
        count: 100
    },
    mutations:{
    },
    //略。。。。。
})

如何使用

第一步，在上面的语法例子里，先引入vuex，然后 Vue.use(Vuex)
第二步，看上面的例子，有个声明的Vuex存储到 store 的变量里，然后在main.ts（声明vue的文件），把该变量以 store 选项的方式“注入”该 store ，如：

new Vue({
    el: '#app',
  store: store //es6里，如果名字一样可以直接简写成store
})

也就是说，Vuex通过 store 选项，提供了一种机制将这状态从根组件“注入”到每个子组件中（前提需要调用 Vue.use(Vuex) ）
第三步，就可以使用Vuex了

Vuex的核心概念

State

与vue实例中的 data 遵循同样的规则，也可以在State里存储数据，把State的property转为getter/setter，从而让data的property能够响应数据变化。

创建实例后，可以在 computed 通过 store.state 来获取状态对象，如：

console.log(store.state.count)    //打印输出为100

重点：在模块化的构建项目中，如果按照上面的说法就需要每个组件都要导入一次，十分麻烦。
解决办法：按照上面例子中的“如何使用Vuex”的第二步，在完成这个第二步后，该store实例会注入到根组件下的所有子组件中，就可以通过 this.$store 访问到state里的数据，如：

console.log(this.$store.state.count)

在TS组件里有个问题，这是Vue与TS没有很好结合的一个点之一， TS不能直接读取到state里面的数据，需要在TS里添加getter/setter代码才可以。如：

export default class 组件名 extends Vue{
  get 方法名{
        return this.$store.state.count;
  }
}

Mutations

可以声明一个函数，对state实例的数据进行操作。如：

const store = new Vuex..Store({
    state:{
        count: 0
    },
    mutations:{
        add(state){
            state.count++
        }
    }
})

:::danger Mutations是不可以使用this
:::

那么如何调用这个 add() 函数？可以使用 store.commit('add') 调用。

Getter

Vuex允许在store中定义“getter”，即可以理解为vue里的计算属性，与计算属性一样，getter的返回值也会被依赖缓存起来，依赖变了才会重新计算。