State
单一状态树
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例 (全局单例模式)。
在 Vue 组件中获得 Vuex 状态
那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：
import store from './store'
// 创建一个 Counter 组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}
每当store.state.count变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。
Vuex 通过store选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用Vue.use(Vuex)）：
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})
通过在根实例中注册store选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问到。让我们更新下Counter的实现：
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
mapState 辅助函数
当一个组件需要获取多个状态时，我们可以使用mapState辅助函数帮助我们生成计算属性：
export default {
computed: {
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// 箭头函数可使代码更简练
count: state => state.count,
count2: state => state.count2
})
}
}
当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组
export default {
computed: {
// 使用对象展开运算符将此对象混入到外部对象中
...mapState([
// 映射 this.count3 为 store.state.count3
'count3',
'count4'
])
}
}
Getter
有时候我们需要从store中的state中派生出一些状态，这时我们可以使用getter（可以认为是store的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受两个参数（这里暂时只讲两个）第一个参数是state，第二个参数是getter：
getters: {
// ...
doneAdd(state, getters) {
return state.data1 + getters.getCount
}
}
通过方法访问
你也可以通过让getter返回一个函数，来实现给getter传参。在你对store里的数组进行查询时非常有用。
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
注意，getter在通过方法访问时，每次都会去进行调用，而不会缓存结果。
mapGetters辅助函数
mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
export default {
// ...
computed: {
// 使用对象展开运算符将数组 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
如果你想将一个getter属性另取一个名字，使用对象形式：
export default {
// ...
computed: {
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
}
}
Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受两个参数作为第一个参数是state，第二个是payload(载荷)：
// ...
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)
在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：
// ...
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
store.commit('increment', {
amount: 10
})
对象风格的提交方式
提交 mutation 的另一种方式是直接使用包含type属性的对象：
store.commit({
type: 'increment',
amount: 10
})
当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
在组件中提交 Mutation
你可以在组件中使用this.$store.commit('xxx')提交 mutation，或者使用mapMutations辅助函数将组件中的 methods 映射为store.commit调用（需要在根节点注入store，就是上文中的Vue.use(Vuex)）。
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')`
})
}
}
注意事项
- Mutation 必须是同步函数
- 最好提前在你的 store 中初始化好所有所需属性
- 当需要在对象上添加新属性时，你应该使用
Vue.set(obj, 'newProp', 123), 或者以新对象替换老对象
Action
Action 函数第一个参数接受一个与 store 实例具有相同方法和属性的context对象，因此你可以调用context.commit提交一个 mutation，或者通过context.state和context.getters来获取 state 和 getters。当我们在之后介绍到Modules时，你就知道context对象为什么不是 store 实例本身了。第二个参数是载荷
实践中，我们会经常用到 ES2015 的参数解构来简化代码（特别是我们需要调用commit很多次的时候）：
mutations: {
// 使用context对象
increment(context, payload) {
context.commit('increment', payload.count)
}
}
mutations: {
// 解构context对象
increment({ commit }, payload) {
context.commit('increment', payload.count)
}
}
Actions 支持同样的载荷方式和对象方式进行分发：
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
在组件中分发 Action
你在组件中使用this.$store.dispatch('xxx')分发 action，或者使用mapActions辅助函数将组件的 methods 映射为 store.dispatch调用（需要先在根节点注入store）：
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')`
})
}
}
组合 Action
// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
一个
store.dispatch在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。
Module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
// 根节点state
const state = {
count: 123
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
},
state // 这里就是根节点的状态，当然也可以加getters、actions等
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
store.state // -> 根节点状态(使用：store.state.count => 123)
模块的局部状态
对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。
const moduleA = {
state: { count: 0 },
mutations: {
increment (state) {
// 这里的 `state` 对象是模块的局部状态
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}
同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为context.rootState：
const moduleA = {
// ...
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}
对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：
const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
注意：
这里使用的是无命名空间的模块，只有state分局部state和根节点state，模块内部的 action、mutation 和 getter 依然是是注册在全局命名空间的。
命名空间
默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
如果希望你的模块具有更高的封装度和复用性，你可以通过添加namespaced: true的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
// 模块内容（module assets）
state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
actions: {
login () { ... } // -> dispatch('account/login')
},
mutations: {
login () { ... } // -> commit('account/login')
},
// 嵌套模块
modules: {
// 继承父模块的命名空间
myPage: {
state: { ... },
getters: {
profile () { ... } // -> getters['account/profile']
}
},
// 进一步嵌套命名空间
posts: {
namespaced: true,
state: { ... },
getters: {
popular () { ... } // -> getters['account/posts/popular']
}
}
}
}
}
})
启用了命名空间的 getter 和 action 会收到局部化的getter，dispatch和commit。换言之，你在使用模块内容（module assets）时不需要在同一模块内额外添加空间名前缀。更改namespaced属性后不需要修改模块内的代码。
在带命名空间的模块内访问全局内容（Global Assets）
如果你希望使用全局 state 和 getter，rootState和rootGetter会作为第三和第四参数传入 getter，也会通过 context对象的属性传入 action。
若需要在全局命名空间内分发 action 或提交 mutation，将{ root: true }作为第三参数传给dispatch或commit即可。
modules: {
foo: {
namespaced: true,
getters: {
// 在这个模块的 getter 中，`getters` 被局部化了
// 你可以使用 getter 的第四个参数来调用 `rootGetters`
someGetter (state, getters, rootState, rootGetters) {
getters.someOtherGetter // -> 'foo/someOtherGetter'
rootGetters.someOtherGetter // -> 'someOtherGetter'
},
someOtherGetter: state => { ... }
},
actions: {
// 在这个模块中， dispatch 和 commit 也被局部化了
// 他们可以接受 `root` 属性以访问根 dispatch 或 commit
someAction ({ dispatch, commit, getters, rootGetters }) {
getters.someGetter // -> 'foo/someGetter'
rootGetters.someGetter // -> 'someGetter'
dispatch('someOtherAction') // -> 'foo/someOtherAction'
dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
dispatch('bar/oneAction', null, { root: true }) // -> bar模块下的oneAction
commit('someMutation') // -> 'foo/someMutation'
commit('someMutation', null, { root: true }) // -> 'someMutation'
commit('bar/oneMutation', null, { root: true }) // -> bar模块下的oneMutation
},
someOtherAction (ctx, payload) { ... }
}
}
}
注意：
- 带命名空间的action中的 dispatch 和 commit 被局部化了，访问根下面或其他模块下 dispatch 或 commit时，需要传root属性，但是如果在组件中使用的话就不需要，
this.$store.dispatch('bar/oneAction')，此时的dispatch就是全局下的，所以不用
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
