vuex知识点

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式；集中存储和管理应用的所有组件状态。

• 状态：什么是状态，我们可以通俗的理解为数据。Vue只关心视图层，那么视图的状态如何来确定？我们知道是通过数据驱动，这里的状态管理可以简单理解为管理数据。

• 集中存储：Vue只关心视图，那么我们需要一个仓库（Store）来存储数据，而且是所有的数据集中存储，视图和数据就可以分析。

• 管理：除了存储，还可以管理数据，也就是计算、处理数据。

• 所有组件状态：所用的组件共用一个仓库（Store），也就是一个项目只有一个数据源（区分模块modules）。

• 总结：Vuex就是在一个项目中，提供唯一的管理数据源的仓库。

Vuex将组件公用数据抽离，在一个公共仓库管理，使得各个组件容易获取（getter）数据，也容易设置数据（setter） 。

Store

Store 仓库里面放了很多对象。 其中state就是数据源存放地 ，对应于与一般 Vue 对象里面的 data （后面讲到的 actions 和 mutations 对应于 methods ）。

• 在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules。

• 

• 总结，Store类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法以对象形式传入其实例中。要注意一个应用或是项目中只能存在一个Store实例！！

state

响应式存储：state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。（这里“状态”=“数据”），也就是是说数据和视图是同步的。

• 获取：在Vue组件中获取数据，最直接的可以通过计算属性中获取；

• 组件仍然可以保存局部状态：虽然说Vuex的Store仓库让我们同一管理数据变得更加方便，但是代码一多也会变得冗长，有些组件的数据是自己严格自用，我们可以将state放在组件自身，作为局部数据，专供此组件使用，其他的组件不能用。

• mapState的作用是把全局的 state 和 getters 映射到当前组件的 computed 计算属性中，this.$store.state。

• 使用示例

 import {mapState} from 'vuex' 
 export default {
  computer :
  mapState({
   count: state => state.count,
    'count' // 映射 this.count 为 store.state.count
  })
}

getters

在 Store 仓库里， state 就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到 computed 中。但是如果很多组件都

使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。

我们可以认为，【getters】是store的计算属性。

• 定义：我们可以在store中定义getters，第一个参数是state

  const getters = {style:state => state.style}

• 传参：定义的Getters会暴露为store.getters对象，也可以接受其他的getters作为第二个参数；

• 使用：

  computed: {
  doneTodosCount () {
      return this.$store.getters.doneTodosCount}

mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性中，用法和mapState类似

import { mapGetters } from 'vuex'

computed: {
   // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
    'doneTodosCount',
    'anotherGetter',])}
 //给getter属性换名字
  mapGetters({
 // 映射 this.doneCount 为 store.getters.doneTodosCount
  doneCount: 'doneTodosCount'
})

Mutations

• getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变 state里面的数据)，Vue的视图是由数据驱动的，也就是说state里面的数据是动态变化的，那么怎么改变呢，切记在Vuex中store数据改变的唯一方法就是mutation！

• 通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。

使用方法如下

• mutation结构：每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用handker()，调用type的时候需要用到store.commit方法。

   const store = new Vuex.Store({
      state: {
          count: 1
          },
      mutations: {
      increment (state) {      //注册事件，type:increment，handler第一个参数是state；
           // 变更状态
         state.count++}}})
         
      store.commit('increment')   //调用type，触发handler（state）     
         

• 载荷（payload）:简单的理解就是往handler(stage)中传参handler(stage,pryload)；一般是个对象。

    mutations: {
   increment (state, n) {
       state.count += n}}
   store.commit('increment', 10)

• mutation-types：将常量放在单独的文件中，方便协作开发。

      // mutation-types.js
   export const SOME_MUTATION = 'SOME_MUTATION'
      // store.js
  import Vuex from 'vuex'
  import { SOME_MUTATION } from './mutation-types'
  
    const store = new Vuex.Store({
      state: { ... },
      mutations: {
       // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
      [SOME_MUTATION] (state) {
      // mutate state
    }
  }
  })

• commit：提交可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

  import { mapMutations } from 'vuex'
  
  export default {
  
  methods: {
    ...mapMutations([
      'increment' // 映射 this.increment() 为 
  this.$store.commit('increment')]),
    ...mapMutations({
      add: 'increment' // 映射 this.add() 为 
  this.$store.commit('increment')
    })}}

Actions

• 背景：在mutation中我们讲到，mutation中是存放处理数据的方法的集合，我们使用的时候需要commit。但是commit是同步函数，而且只能是同步执行。那我们想一步操作怎么办？

• 作用：在actions中提交mutation，并且可以包含任何的异步操作。actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据（但是还是通过mutation来操作，因为只有它能操作）

怎么用 actions：

• 定义actions

  const store = new Vuex.Store({//创建store实例
        state: {
           count: 0
               },
        mutations: {                
           increment (state) {
            state.count++
           }
            },
        actions: {         //只是提交`commit`了`mutations`里面的方法。
           increment (context) {
            context.commit('increment')
     }
   }
      })
     
    一般我们会简写成这样
    actions: {
     increment ({ commit }) {
           commit('increment')
        }
           }

• 分发actions

  store.dispatch('increment')

• MapActions和MapState一级MapMutations类似。

Modules

• 背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。

• module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

• 一般结构

  const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
   }
  const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
   }
  
  const store = new Vuex.Store({
    modules: {
      a: moduleA,
      b: moduleB})

• 模块内部的数据：①内部state，模块内部的state是局部的，也就是模块私有的，比如是car.js模块state中的list数据，我们要通过this.$store.state.car.list获取；②内部getter、mutation和action，仍然注册在全局命名空间内，这是为了多模块可以同时响应同一mutation；this.$store.state.car.carGetter的结果是undefined，而通过this.$store.state.carGetter则可以拿到。

• 传参：getters====({state(局部状态),getters（全局getters对象）,roosState（根状态）})；actions====({state(局部状态),commit,roosState（根状态）}).