[Vue 生态] Vuex 文档阅读笔记

目录

• 1. 最简单的 Store
• 2. 核心概念
  • 2.1 State
    • 2.1.1 在Vue 组件中获得Vuex 状态
    • 2.1.2 mapState 辅助函数
    • 2.1.3 对象展开运算符
  • 2.2 Getters
    • 2.2.1 通过属性访问
    • 2.2.2 通过方法访问
    • 2.2.3 mapGetters 辅助函数
  • 2.3 Mutation
    • 2.3.1 提交载荷（Payload）
    • 2.3.2 对象风格的提交方式
    • 2.3.3 Mutations 需遵守 Vue 的响应规则
    • 2.3.4 使用常量替代 Mutation 事件类型
    • 2.3.5 Mutation 必须是同步函数
    • 2.3.6 在组件中提交 Mutation
  • 2.4 Action
    • 2.4.1 分发 Action
    • 2.4.2 在组件中分发 Action
    • 2.4.3 组合 Action
  • 2.5 Module
    • 2.5.1 模块的局部状态
    • 2.5.2 命令空间
      • 2.5.2.1 在带命名空间的模块内访问全局内容（Global Assets）
      • 2.5.2.2 在带命名空间的模块注册全局 action
      • 2.5.2.3 带命名空间的绑定函数
      • 2.5.2.4 给插件开发者的注意事项
    • 2.5.3 模块动态注册
    • 2.5.4 保留 state
    • 2.5.5 模块重用
• 3.进阶

1. 最简单的 Store

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

Vue.use(Vuex)

const store = new Vuex.store({
    state:{
        count:0
    },
    mutations:{
        increment ( state ){
            state.count ++
        }
    }
})

现在可以通过store.state 来获取状态对象， 以及通过store.commit 来触发状态的变更。

store.commit('increment')
console.log(store.state.count) // 1

但是，现在无法在其他组件上访问到状态对象。 为了达到这一目的，我们需要将store和Vue 实例关联起来。

在main.js 中

// 引入store 后
new Vue({
    el:'#app',
    store:store,
})

这样，从所有子组件中，都可以这样去修改和访问state状态对象中的值：

methods:{
    increment(){
        this.$store.commit('increment')
        console.log(this.$store.state.count)
    }
}

⭐ 我们修改状态对象中的值，并不是直接去修改， 而是通过提交 mutation 。

这样做的目的，是代码阅读更加易于理解，且易于调试。

另外， 由于store 中的状态是响应式的，在组件中调用store 中的状态，仅需要在计算属性中去返回即可。 触发 变化也仅仅实在组件的methods 中提交 mutation 。

2. 核心概念

2.1 State

2.1.1 在Vue 组件中获得Vuex 状态

Vuex 的状态存储时响应式的，从store 实例中读取状态的最简单方法就是在计算属性中 返回某个状态：

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

2.1.2 mapState 辅助函数

当一个组件需要获取多个状态 ， 每一个状态都上上面那样去定义computed 有一些繁琐， vue 为了简化这个过程，给我们提供了 mapState 辅助函数。

import { mapState } from 'vuex'

export default{
    //...
    computed: mapState({
        count: state=> state.count,
        countAlias : 'count'
    })
}

当计算属性中的属性名和state 中的子节点相同时，可以直接将名称字符串作为一个字符串数组元素， 然后将这个字符串数组传入mapState

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

2.1.3 对象展开运算符

mapState 函数返回的是一个对象， 怎么将它与局部计算属性混合使用呢 ？

computed:{
    localComputed(){/*...*/},
    ...mapState({
        //...
    })
}

2.2 Getters

有时候，我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

computed: {
    doneTodosCount (){
        return this.$store.state.todos.filter(todo => todo.done).length
    }
}

如果，有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数，然后再多出导入它 —— 无论哪种方式都不是很理想。

Vuex 允许它们在 store 中定义getter （可以认为是store的计算属性。） 就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，其只有当它的依赖值发送了改变才会被重新计算。

Getter 接收 state 作为其第一个参数 ：

const store = new Vuex.Store({
    state:{
        todos:[
            { id: 1, text: '...', done: true},
            { id: 2, text: '...', done: false}
        ]
    },
    getters: {
        doneTodos: state=>{
            return state.todos.filter(todo=>todo.done)
        }
    }
})

2.2.1 通过属性访问

Getter 会暴露为 store.getters 对象， 你可以以属性的形式访问这些值：

store.getters.doneTodos // [{ id: 1, text: '...', done: true }]

Getter 也可以接收其他getter作为第二个参数：

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

store.getters.doneTodosCount // -1

我们可以很容易地在任何组件中使用它：

computed: {
    dontTodosCount (){
        return this.$store.getter.doneTodosCount
    }
}

注意， getter 在通过属性访问时是作为Vue 的响应式系统的一部分缓存其中的

2.2.2 通过方法访问

你也可以通过让getter 返回一个函数，来实现给getter 传参。 在你对 store 里的数组进行查询时会非常有用。

getters: {
    //...
    getTodoById: (state) => (id) => {
        return state.todos.find(todo => todo.id === id)
    }
}

⭐以上代码等同于

getters；{
    //...
    getTodoById: function(state){
        return function(id){
            return state.todos.find(todo => todo.id === id)
        }
    }
}

store.getters.getTodoById(2);// { id:2, text: '...', done: false }

⚠️ 这里的调用很奇怪，这个state 形参是怎么回事?

这里涉及到 “函数的柯里化”， 简单的说：

//①
const add = (x, y) => x + y;
add(2,3) // 5

这段代码的柯里化将会是：

//②
const add = x => y => x + y;

其es5代码为：

const add = function(x){
    return function(y){
        return x + y
    }
}

因此:

getters: {
    //...
    getTodoById: (state) => (id) => {
        return state.todos.find(todo => todo.id === id)
    }
}

就可以写成其等同式（就像② 和 ①是等同的）：

getters: {
    //...
    getTodoById: (state,id) => {
        return state.todos.find(todo => todo.id === id)
    }
}

而 state 这个参数是getters 的默认传参，因此，可以这样去调用：

store.getters.getTodoById(2);

理解参考自：

https://stackoverflow.com/a/32787782/11375753
https://stackoverflow.com/a/67221323/12261182

注意: getter 在通过方法访问时， 每次都会去进行调用， 而不会缓存结果。

2.2.3 mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的getter 映射到局部计算属性：

import { mapGetters } from 'vuex'

export default {
    //...
    computed:{
        // 使用对用展开运算符将getter 混入 computed 对象中
        ...mapGetters({
            'doneTodosCount',
            'anotherGetter',
            //...
        })
    }
}

如果你想将一个 getter 属性另取一个名字， 使用对象形式：

...mapGetters({
    // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
    doneCount: 'doneTodosCount'
})

2.3 Mutation

要更改 Vuex 的 store 中的状态的唯一方法是提交 mutation 。Vuex 中的mutation非常类似于事件 ： 每个 mutation 都有一个字符串的 事件类型（type） 和一个 回调函数（handler）。 这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.store({
    state: {
        count: 1
    },
    mutations: {
        increment (state){
            // 变更状态
            state.count ++ 
        }
    }
})

你不能直接调用一个 mutation handler 。 这个选项更像是事件注册 ： “当触发一个类型（type）为 increment 的 mutation 时， 调用此函数。 " 要唤醒一个 mutation handler ， 你需要以相应的 type 调用 store.commit 方法：

store.commit('increment')

2.3.1 提交载荷（Payload）

你可以向 store.commit 传入额外的参数， 即 mutation的 载荷(payload):

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

store.commit('increment',10)

在大多数情况下， 载荷（Payload） 应该是一个对象， 这样可以包含多个字段并且记录的 mutation 会更易读：

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

store.commit('increment',{
    amount:10
})

2.3.2 对象风格的提交方式

提交一个mutation 的另一种方式是直接使用包含 type属性的对象 ：

store.commit({
    type: 'increment',
    amount: 10
})

当使用对象风格的提交方式， 整个对象都作为载荷传给 mutation函数， 因此 handler 保持不变 :

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

2.3.3 Mutations 需遵守 Vue 的响应规则

既然Vuex 的 store 中的状态是响应式的，那么当我们变更状态时， 监视状态的Vue 组件也会自动更新。这也意味着Vuex 中的mutation 也需要与使用Vue 一样遵守一些注意事项。

1. 最好提前在你的 store 中初始化好所有属性

2. 当需要在对象上添加新属性时， 你应该

   • 使用 Vue.set(obj, 'newProp', 123) ， 或者

   • 以新对象替换老对象。 例如， 利用 对象展开运算符 ， 我们可以这样写：

     state.obj = { ...state.obj, newProp: 123 }
     

2.3.4 使用常量替代 Mutation 事件类型

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。 这样可以使得 linter 之类的工具发挥作用， 同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的mutation 一目了然：

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

2.3.5 Mutation 必须是同步函数

一天重要的原则就是要记住 mutation 必须是同步函数。

2.3.6 在组件中提交 Mutation

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation, 或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用 （需要在根节点注入 store）。

import { mapMutations } from 'vuex'

export default {
    //...
    methods:{
        ...mapMutations([
            'increment', // 将 `this.increment() ` 映射为 `this.$store.commit('increment')`
            
            //`mapMutations` 也支持载荷（Payload）:
			'incrementBy'// 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
        ]),
        ...mapMutations({
            add:'increment' // alias, 将 `this.add()` 映射为 `this.$store.commit('increment')`
        })
    }
}

2.4 Action

Action 类似于 mutation ， 不同在于 ：

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

一个简单的 action

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

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

实践中， 我们经常会用到 ES2015 的参数解构 来简化代码

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

2.4.1 分发 Action

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：

actions: {
    incrementAsync({ commit }){
        setTimeout(()=>{
            commit('increment')
        },1000)
    }
}

Actions 支持 同样的载荷方式和对象方式进行分发 ：

// 以载荷形式分发
store.dispatch('incrementAsync',{
    amount: 10
})

// 以对象形式分发
store.dispatch({
    type:'incrementAsync',
    amount: 10
})

2.4.2 在组件中分发 Action

你在组件中使用this.$store.dispatch('xxx') 分发 action, 或者使用 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' // alias 将`this.add()` 映射为 `this.$store.dispatch('increment')`
        })
    }
}

2.4.3 组合 Action

Action 通常是异步的， 那么如何知道 action 什么时候结束呢 ？ 更重要的是， 我们如何才能组合多个 action, 以处理更加复杂的异步流程 ？

首先，你需要明白， store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise, 并且store.dispatch 仍旧返回 Promise :

actions: {
    actionA({ commit }){
        return new Promise((resolve, reject)=>{
            setTimeout(()=>{
                commit('someMutation')
                resolve()
            },1000)
        })
    }
}

现在你可以 ：

store.dispatch('actionA').then(() => {
    //...
})

在另外一个 acion 中也可以：

actions : {
    //...
    actionB({ dispatch, commit }){
        return dispatch('actionA').then(() => {
            commit('someOtherMutation')
        })
    }
}

最后，如果我们利用 async / await ， 我们可以如下组合 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 才会执行。

2.5 Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，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 的状态

2.5.1 模块的局部状态

对于模块内部的 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
    }
  }
}

2.5.2 命令空间

默认情况下，模块内部的 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 属性后不需要修改模块内的代码。

2.5.2.1 在带命名空间的模块内访问全局内容（Global Assets）

如果你希望使用全局 state 和 getter，rootState 和 rootGetters 会作为第三和第四参数传入 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'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}

2.5.2.2 在带命名空间的模块注册全局 action

若需要在带命名空间的模块注册全局 action，你可添加 root: true，并将这个 action 的定义放在函数 handler 中。例如：

{
  actions: {
    someOtherAction ({dispatch}) {
      dispatch('someAction')
    }
  },
  modules: {
    foo: {
      namespaced: true,

      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }
    }
  }
}

2.5.2.3 带命名空间的绑定函数

当使用 mapState, mapGetters, mapActions 和 mapMutations 这些函数来绑定带命名空间的模块时，写起来可能比较繁琐：

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},
methods: {
  ...mapActions([
    'some/nested/module/foo', // -> this['some/nested/module/foo']()
    'some/nested/module/bar' // -> this['some/nested/module/bar']()
  ])
}

对于这种情况，你可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。于是上面的例子可以简化为：

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

而且，你可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

2.5.2.4 给插件开发者的注意事项

如果你开发的插件（Plugin）提供了模块并允许用户将其添加到 Vuex store，可能需要考虑模块的空间名称问题。对于这种情况，你可以通过插件的参数对象来允许用户指定空间名称：

// 通过插件的参数对象得到空间名称
// 然后返回 Vuex 插件函数
export function createPlugin (options = {}) {
  return function (store) {
    // 把空间名字添加到插件模块的类型（type）中去
    const namespace = options.namespace || ''
    store.dispatch(namespace + 'pluginAction')
  }
}

2.5.3 模块动态注册

在 store 创建之后，你可以使用 store.registerModule 方法注册模块：

import Vuex from 'vuex'

const store = new Vuex.Store({ /* 选项 */ })

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

之后就可以通过 store.state.myModule 和 store.state.nested.myModule 访问模块的状态。

模块动态注册功能使得其他 Vue 插件可以通过在 store 中附加新模块的方式来使用 Vuex 管理状态。例如，vuex-router-sync (opens new window)插件就是通过动态注册模块将 vue-router 和 vuex 结合在一起，实现应用的路由状态管理。

你也可以使用 store.unregisterModule(moduleName) 来动态卸载模块。注意，你不能使用此方法卸载静态模块（即创建 store 时声明的模块）。

注意，你可以通过 store.hasModule(moduleName) 方法检查该模块是否已经被注册到 store。

2.5.4 保留 state

在注册一个新 module 时，你很有可能想保留过去的 state，例如从一个服务端渲染的应用保留 state。你可以通过 preserveState 选项将其归档：store.registerModule('a', module, { preserveState: true })。

当你设置 preserveState: true 时，该模块会被注册，action、mutation 和 getter 会被添加到 store 中，但是 state 不会。这里假设 store 的 state 已经包含了这个 module 的 state 并且你不希望将其覆写。

2.5.5 模块重用

有时我们可能需要创建一个模块的多个实例，例如：

• 创建多个 store，他们公用同一个模块 (例如当 runInNewContext 选项是 false 或 'once' 时，为了在服务端渲染中避免有状态的单例 (opens new window))
• 在一个 store 中多次注册同一个模块

如果我们使用一个纯对象来声明模块的状态，那么这个状态对象会通过引用被共享，导致状态对象被修改时 store 或模块间数据互相污染的问题。

实际上这和 Vue 组件内的 data 是同样的问题。因此解决办法也是相同的——使用一个函数来声明模块状态（仅 2.3.0+ 支持）：

const MyReusableModule = {
  state: () => ({
    foo: 'bar'
  }),
  // mutation, action 和 getter 等等...
}

3.进阶

项目结构

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

1. 应用层级的状态应该集中到单个 store 对象中。
2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
3. 异步逻辑都应该封装到 action 里面。

只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

请参考购物车示例 (opens new window)。