# Vue进阶之使用命名空间更优雅地规划store 时隔大半年，又回到 Vue 的怀抱。自以为对 Vue 还是有一定理解，但短短的两周的项目实践，让我还是有新的收获：使用命名空间规划设计 store，真是活到老，学到老。本文将基于 Vuex 探讨如何更优雅地规划设计 store。 ## 1. 复习 Vuex 的基本使用在 Vuex 中,一个 store 实例，由四个部分组成： + state：保存应用状态 + getter：把状态挂载到特定的组件上供组件使用 + mutation：用于修改应用状态 + action：mutation 都是同步操作，引入了 action 处理异步改变应用状态的场景 ### 1.1 mapState & getter 先看第一个问题：store 中保存的应用状态，如何挂载到组件上供组件使用？通常是基于 store 中的数据为组件生成计算属性，常见有 3 种方法： + 使用 this.$store + 通过 Vuex.mapState() 方法 + 通过 Vuex.mapGetters() 方法 ```html

{{item.name}}

{{item.name}}

{{item.name}}

{{item.name}}

``` ### 1.2 mutation 上面介绍了如何使用 store 中的状态，接下来的问题就是如何修改 store 了？在 Vuex 中通过 mutation 来修改应用状态，即 store。 ```html

{{personLength}}: {{item.name}}

``` 关于 mutation 函数的命名，最佳实践是使用字符串常量。这样一来，上面的 mutation 会变成大概下面的样子： ```html const ADD_PERSON = 'ADD_PERSON'; const DEL_PERSON = 'DEL_PERSON'; // ... mutations: { // 最佳实践: 使用常量替代 Mutation 事件类型 [ADD_PERSON](state) { state.persons = state.persons.concat({ name: `名称${Date.now()}`, id: state.persons.length + 1 }); }, [DEL_PERSON](state, delId) { state.persons = state.persons.filter(d => d.id !== delId); } } // ... ``` ### 1.3 action mutation 可以修改 store,但 mutation 中都是同步操作,不能包含异步操作.异步操作交给 action 来处理 ```html

{{personLength}}: {{item.name}}

加载中...

``` 如上面的代码，action 可以通过 dispatch 直接触发，也可以通过 Vuex.mapActions 变成方法来供组件调用。 ## 2. 为什么 store 需要命名空间复习完了 Vuex 的使用，我们来看一个真实的应用场景。假设我们要做一个商城应用，有商品列表，订单列表两个功能页。很快，我们实现了功能，代码如下： ```html

商品列表: {{item.name}}

订单列表: {{item.name}}

``` 通常，像商城这样中大型项目，都是多人协作共同开发的。多人协作时，最怕的就是代码冲突。上面的 store 设计，有一个商品列表和一个订单列表，它们对应的 getters 分别是 productList 和 orderList。如果我们定义 mutation-type 的话，大概率会是下面这样： ```js const ADD_PRODUCT = 'ADD_PRODUCT'; const DEL_PRODUCT = 'DEL_PRODUCT'; const UPDATE_PRODUCT = 'UPDATE_PRODUCT'; const ADD_ORDER = 'ADD_ORDER'; const DEL_ORDER = 'DEL_ORDER'; const UPDATE_ORDER = 'UPDATE_ORDER'; ``` 大家应该也注意到了，为了防止冲突，我们为每个 mutation 加了模块后缀，使原本 ADD，DEL 就可以很好表示 mutation 类型的硬生生变成了 ADD_PRODUCT, ADD_ORDER。当然上面的代码，完全可以实现业务功能。但是在防止冲突或模块解藕上还是差了一步。同样，为了防止 actions 冲突，我们不得不这样来命名 actions：queryProductList, queryOrderList。 ![getter重复](/static/images/20181030/7afee4b.png) **那么，怎么让各模块的 store 完全解藕，在为 getter, mutation 或 action 命名时不用小心翼翼地加前后缀来防止冲突呢？Vuex 提供了命名空间来解决这个问题。** ## 3. 基于命名空间的 store 设计同样是上面讲的商城应用，使用了 namespace 的 store 代码大概如下： ```html

商品列表: {{item.name}}

订单列表: {{item.name}}

``` 大家会发现，虽然 product 和 order 模块的 state, getter, action, mutation 的名称都是一样的，但却因为加了 namespaced: true 这个配置而被很好的隔离开来。关于 store 的设计，我个人建议至少要有2级结构，这样能保证最大的扩展性。基于上面的商城应用，其 store 的建议设计是这样的： ![商城store](/static/images/20181030/f7e1266.png) 概要代码如下： ```html

商品列表: {{item.name}}

``` ## 4. 小结建议大家在项目实践中为 store 加上命名空间，以上！

{{appName}}

从AddressPicker实现探讨小程序组件封装方式

发表评论：