Vuex基本结构

Vuex基本结构

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

State

Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。

使用 mapState 简化 State 在视图中的使用，mapState 返回计算属性

mapState 有两种使用的方式：

• 接收数组参数

// 该方法是 vuex 提供的，所以使用前要先导入 
import { mapState } from 'vuex'
// mapState 返回名称为 count 和 msg 的计算属性 
// 在模板中直接使用 count 和 msg 
computed: {
  ...mapState(['count', 'msg']),
}

• 接收对象参数

    如果当前视图中已经有了 count 和 msg，如果使用上述方式的话会有命名冲突，解决的方式：

// 该方法是 vuex 提供的，所以使用前要先导入
import { mapState } from 'vuex' 
// 通过传入对象，可以重命名返回的计算属性 
// 在模板中直接使用 num 和 
message computed: { 
...mapState({
  num: state => state.count, 
  message: state => state.msg 
})
}

Getter

Getter 就是 store 中的计算属性，使用 mapGetter 简化视图中的使用

import { mapGetter } from 'vuex'
computed: {
...mapGetter(['reverseMsg']), // 改名，在模板中使用 reverse 
...mapGetter({ reverse: 'reverseMsg' }) 
}

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。使用 Mutation 改变状态的好处是，集中的一个位置对状态修改，不管在什么地方修改，都可以追踪到状态的修改。可以实现高级的 time-travel 调试功能

import { mapMutations } from 'vuex' 
methods: {  
...mapMutations(['increate']), 
 // 传对象解决重名的问题 
...mapMutations({
 increateMut: 'increate' 
}) 
}

Action

• Action 提交的是 mutation，而不是直接变更状态。

• Action 可以包含任意异步操作。

import { mapActions } from 'vuex'
methods: { 
  ...mapActions(['increate']), 
    // 传对象解决重名的问题 
    ...mapActions({ 
    increateAction: 'increate'
  }) 
}