一、安装和使用

npm install vuex

创建一个store/index.js文件安装vuex并导出store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = {
  // state, actions, mutations, getters
}

export default new Vuex.Store(store)

在main.js中注入store

import store from './store'

new Vue({
  // ....,
  store
})

这样，在组件中使用this.$store即可访问store实例

二、工作流程

vuex.png

)

三、组成部分

state

使用state字段声明

const store = {
  state: {
    state1: 'state1'
  }
}

使用this.$store.state获取

// 需要在组件的computed中使用
computed: {
  state1 () {
    // 获取state中的state1
    return this.$store.state.state1
  }
}

也可以使用mapState进行映射

import { mapState } from 'vuex'

computed: {
  // mapState可以映射多个 () => this.$store.state.state1函数
  ...mapState([
    'state1',
    'state2'
  ])
  // 也可以这样
  ...mapState({
    'aliasState1': state => state.state1 // 将state1映射成组件的aliasState1
  })
}

actions

actions声明

const store = {
  actions: {
    action1 (context, payload) {
      // context是一个拥有和$store一样属性和方法的对象
      // payload是载荷，是dispatch传递的参数
      // commit触发mutations
      context.commit('mutation1', payload)
    }
  }
}

使用this.$store.dispatch触发action

methods: {
  dispatchAction1 () {
    // 这里的{ arg1: 'arg1' }是上面action1接收到的payload
    this.$store.dispatch('action1', { arg1: 'arg1' })
    // 也可以这样
    this.$store.dispatch({
      type: 'action1', // 需要触发的action
      arg1: arg1,
      // ... 其他参数
    })
  }
}

actions也有map函数mapActions

import { mapActions } from 'vuex'

methods: {
  ...mapActions([
    'action1'
  ])
}

如果要传递参数，那么需要action1(payload)这样调用，比如

<tag @click.natvie='action1(payload)'></tag>

也可以给mapActions传入一个对象作为参数

methods: {
  ...mapActions ({
    'aliasAction1': {
      type: 'action1', // 需要触发的action
      arg1: 'arg1',
      // ... 其他参数
    },
    // ...
  }) 
}

异步操作（比如加载数据）一般放在actions中

mutations

mutations使用mutations字段声明

mutations: {
  mutation1 (state, payload) {
    // payload是action提交的载荷（参数）
    state.state1 = 'otherValue' // 改变state
  }
}

state改变视图就会改变，如果视图没改变
可能state的值的undefined
或者在组件中将state放在了data而不是computed中使用

getters

getters使用getters字段声明

getters: {
  getter1: (state, getters) {
    // getters是其它getters
    return // 返回一个用于computed的值 
  }
}

它的用法和state一样，mapGetters也和mapState用法一样

modules

使用modules字段可以拆分store，便于管理

const store = {
  modules: {
    module1: store1,
    module2: store2
    // ...
  }，
   // 根store的state，actoins，mutations, getters
}

modules中的store1, store2, ...都是store的实例，即包含state，actoins，mutations, getters，modules的对象；module1 ，module2是模块名
这时，使用方式有所变化：
state使用this.$store.state.moduleName来获取
actions的dispatch方式没变，不过actoin方法接收的context有所变化，多了一个rootState属性接收根state，而原来的state属性变为当前模块的state
getters方法接收的参数除了state，getters外，多一个参数rootState
mutations方法接收的state参数变为局部的state

modules中的state，actoins，mutations, getters默认被定义在全局空间，所以要避免局部和根部，局部和局部之间的命名冲突

除此以外，modules下的store实例还有一个namespaced字段，如果它设置为true,则会将局部store定义在新的命名空间中

const store = {
  modules: {
    module1: {
      state,
      actions: {
        action1 () {},
        // 也可以
        action1: {
          root: true, // 如果为true，将action1定义在根部
          handler () {} // 回调
        }
      },
      mutations,
      getters,
      namespaced: true, // store定义在module1空间中
      // 也可以嵌套
      submodule1: {
        // ....
        namespaced: true // 命名空间为module1/submodule1
        // 如果namespaced不为true或未定义，则继承父的命名空间，即module1
      }
    }
  }
}

这时，使用方式在对比上面没定义namespaced的有一下不同：
actions接收的context参数具有dispatch, commit, getters, rootGetters属性
getters接收的参数变为state, getters, rootState, rootGetters
map*函数（代指mapState, mapActions, mapGetters，mapMutations）需要指定命名空间

...map*(`[命名空间]`, )
// 比如
...mapState('module1', [
  'state1'
])

也可以使用createNamespacedHelpers固定命名空间

import { createNamespacedHelpers } from 'vuex'

const { map* } = createNamespacedHelpers('[命名空间]')

...map*()

比如：

import { createNamespacedHelpers } from 'vuex'

const { mapState } = createNamespacedHelpers('module1')

...mapState([
  state1 // 映射为module1下的state1
])

vuex知识点