Vuex用法总结 - Githubissues

Vuex是Vue.js应用程序开发多状态管理模式，它通过建立一个全局单例来集中储存管理应用多所有组件多状态，并以相应的规则保证状态以一种可预测的方式发生变化。其核心是store仓库，并且是响应式的。

使用

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

Vue.use(Vuex)
// demo
const store = new Vuex.Store({
  state: {
    arr: [],
  },
  getters: {
    getlen: state => {
      return state.arr.length
    }
  },
  mutations: {
    addNum (state, payload) {
      state.arr.push(payload.num)
    }
  },
  actions: {
    addNum ({ commit, state, dispatch }) {
      commit('addNum', {num: 1})
    }
  },
  modules: {...},
})

更改state必须通过提交mutation来实现，异步操作写在action里面。

State

在子组件可以通过this.$store.state来访问到 mapState 辅助函数可以很方便地批量生成计算属性

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

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

与局部计算属性混合使用

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

Getters

相当于store的计算属性，可以通过this.$store.getters访问

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

实现getter传参

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
-----
this.$store.getters.getTodoById(2)

mapGetters辅助函数将store中多getter映射到局部计算属性

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中，数组参数，getter与计算属性名字相同
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ]),
  // 另取名字，对象参数
    ...mapGetters({
      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })
  }
}

Mutations

专门用来更改store中多状态，可以通过store.commit('mutation-name', payload)来触发，也可以通过对象参数来触发

store.commit({
  type: 'mutation-name',
  payload: {...}
})

注意

1. 最好提前在你的 store 中初始化好所有所需属性。
1. 当需要在对象上添加新属性时，你应该
  - 使用 Vue.set(obj, 'newProp', 123), 或者
  - 以新对象替换老对象。例如，利用对象展开运算符我们可以这样写：state.obj = { ...state.obj, newProp: 123 } mapMutations辅助函数用来将组件中的 methods 映射为 store.commit 调用
```
import { mapMutations } from 'vuex'
```

export default { // ... 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')`
})

} }

### Actions
可以包含异步操作，通过提交mutation来更改store，通过`store.dispatch('action-name', payload)`来触发，也可以用对象参数
``` js
store.dispatch({
  type: 'action-name',
  payload: {...}
})

mapActions辅助函数将组件的 methods 映射为 store.dispatch 调用

import { mapActions } from 'vuex'

export default {
  // ...
  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')`
    })
  }
}

dispatch 返回 Promise
Modules

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
```
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 的状态


- 对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象
- 对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState
- 对于模块内部的 getter，根节点状态会作为第三个参数暴露出来
- [进阶](https://vuex.vuejs.org/zh/guide/modules.html#%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4)

buddywang / blog

Vuex用法总结 #6

使用

State

Getters

Mutations

Modules