vuex的阶段汇总

store的架构关系

 

 

new Vuex.store({
  state,
  mutations,
  actions,
  getters
})

main.js

import store from './store/store'

new Vue({
    store, //注入进来
    router,
    render: h => h(App),
}).$mount('#app')

state

定义

new Vuex.store({
  state:{
    count:0
  }
})

使用

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

放在计算属性中

getters

理解为store中的计算属性

一、state做为第一参数

getters:{
  f:(state)=>{...}

二、getter做为第二参数

getters:{
  f:(state,getter)=>{...}

三、将getter返回成函数，方便传参

getters:{
  f:(state)=>(fm)=>{
    return ....}

使用方法：

this.$store.getters.f(xx)

mutations

每个mutation可以抽象为一个事件类型(type)+回调函数(handler)

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    // 事件类型 type 为 increment
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

使用 commit触发

store.commit('increment')

一、state做为第一参数

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

// 调用
store.commit('increment', 10)

二、载荷做为第二参数

这个额外的参数称为 '载荷'，一般为对象

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

提交的两种方式

// 1、把载荷和type分开提交
store.commit('increment', {
  amount: 10
})

// 2、整个对象都作为载荷传给 mutation 函数
store.commit({
  type: 'increment',
  amount: 10
})

事件名使用常量

// 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
    }
  }
})

actions

Action 类似于 mutation，不同在于：

1、Action 提交的是 mutation，而不是直接变更状态。
2、Action 可以包含任意异步操作。

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

可以看到，Action 函数接受一个 context 参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性，但是他们并不是同一个实例，后面学习 Modules 的时候会介绍它们为什么不一样。

 

所以在这里可以使用 context.commit 来提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

当然，为了代码简化，我们可以使用 ES2015 的 参数解构 来直接展开，便于 commit、state 等多次调用。如下：

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

context（也即store）的属性

context.commit(ADD_COUNT)
context.dispatch(ADD_COUNT)
context.getters
context.rootGetters
context.rootState
context.state

分发action

store.dispatch('increment')

modules

模块示意图

模块里面定义的mutation和action都是注册到全局中去的。