31.Module

当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成 module。每个module拥有自己的 state、mutation、action、getter、甚至是嵌套子模块—(从上至下进行同样方式的分割)。

namespace:
默认情况下,module内部的 action、mutation 和 getter 是注册在namespace的',这样使得多个模块能够对同一 mutation 或 action 作出响应;如果希望module具有更高的封装度和复用性,你可以通过添加 namespaced: true 的方式使其成为带namespace的module。

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']
          }
        }
      }
    }
  }
})

<<:  Day31 | 提供程序码编辑的editor区域

>>:  # Day32 写在Go繁之後

Day-24 AlertDialog

AlertDialog与Toast皆可用於显示讯息, 但与Toast不同的是, AlertDialo...

Day7 Android - 按钮状态换色

今天来谈一谈有关常用的button设计,像是他预设的颜色是白色,然後当我点击按钮时变成黑色等等类似的...

Day28. 抽象工厂模式

本文同步更新於blog Abstract Factory Pattern 提供一个接口,用於创建相...

JavaScript Day01 - 说明

前言 这次主要是更新我之前的笔记,那时候刚学习 JavaScript,对於一些结果可能不是很懂,刚好...

铁人赛 Day2 -- SQL到底是什麽东西?讲中文好不好

SQL到底是什麽东西? 全名叫做"结构化查询语言(Structured Query Lan...