Vuex基本知识点理解

本文基于参考，进行自我理解后的基本知识的整理，完整参考请移步https://mobilesite.github.io/2016/12/18/vuex-introduction/

【不知道为什么链接提示有风险，but我真的点开过好几次，木有问题，随意】

管理需要共享的状态，比如多个组件共用一个状态，或者一个状态影响多个组件的变化

使用方法：

Vuew包含一个名为Store的构造函数，通过store选项将构造出的实例从根组件注入到每一个子组件中
根实例中注册store选项，子组件可通过this.$store进行访问

获取状态state方法:

1.this.$store.state直接获取状态
2.利用vuex提供的mapState辅助函数将state映射到计算属性computed
 

//component.js
//形式一

import { mapState } from 'vuex'

export default {
  computed: mapState([
    // 映射 this.count 为 store.state.count
    'count'
  ])
}

//形式二
import { mapState } from 'vuex'

export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

使用getters方法：

【getters用来对state进行加工处理】
1.this.$store.getters.valueName访问派生出来的状态
2.利用mapGetters辅助函数将其映射到本地计算属性中

//component.js


import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    //形式一:名称相同
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])


    //形式二：名称不同
    mapGetters({
      // 映射 `this.doneCount` 为 `store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })
  }
}

mutations:在store中改变state的唯一的方法，可被组件触发,同步执行

 

//store.js
mutations: {
    increment(state, payload) {
        //在这里改变state中的数据
        state.count = payload.number;
    }
},


//component.js
//方法一
this.$store.commit('increment', {
  amount: 10
})
//方法二
this.$store.commit({
  type: 'increment',
  amount: 10
})
//方法三
methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }

action:可包含异步操作，可接收一个与store具有相同属性和方法的context对象，可使用解构语法得到需要的属性或者方法；action可返回一个Promise对象

 

//store.js

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

  //正常接收一个context
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }

  //解构方法获取commit或者其他属性方法（只有一个action，只是为了区分说明）
  actions: {
    increment ({commit}) {
          commit('increment')
    }
}
})

 

//component.js
//方法一
this.$store.dispatch('incrementAsync', {
  amount: 10
})
//方法二
this.$store.dispatch({
  type: 'incrementAsync',
  amount: 10
})
//方法三
methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }

区别：mutation处理函数中所做的事情是改变state，而action处理函数中所做的事情则是commit mutation

Module:对store的一种切割，每个module里面有自己的state，mutations，actions，getters，其中接收的有关状态和上下文都是模块中的局部变量，根状态变量有一个名为rootState的参数接收

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

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

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

总结（摘自文章最顶部链接）

1、应用层级的状态应该集中到单个 store 对象中，状态对象太复杂的时候可以划分module。

2、提交 mutation 是更改状态的唯一方法。

3、在触发方法上：

      action的触发是dispatch

      mutation的触发是commit；

4、在功能上：

      state保存的是数据

      getters是对state进行二次加工

      action的处理函数的功能最终是commit mutation

      mutation处理函数的功能最终是改变state

5、在同步异步上：

     异步逻辑都应该封装到 action 里面

     mutation 是同步的，不能出现异步

6、在流程上：

      vue component—-dispatch—->actions—-commit—->mutations—-mutate—->state—-render—->vue component。从而形成闭环。

 

7、辅助方法的映射上：

      mapGetters、mapState 都是用在computed声明里面；

      mapActions、mapMutations则都是用在methods声明里面。