如何在快应用开发中使用 vuex 做状态管理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。如果您需要构建一个中大型单页应用，尤其是涉及多个页面需要共享数据，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。与 Vue 一样，快应用也是基于MVVM 的设计模式，因此略作适配，Vuex 也适用于快应用开发。本文旨在与大家分享：如何在快应用开发中使用 vuex 做状态管理。
qa-vuex：快应用开发的状态管理
目标与理念
快应用是基于手机硬件平台的新型应用形态，标准是由主流手机厂商组成的快应用联盟联合制定。其标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台，以平台化的生态模式对个人开发者和企业开发者全品类开放。快应用具备传统 APP 完整的应用体验，无需安装、即点即用；覆盖 10 亿设备，与操作系统深度集成，探索新型应用场景。快应用 ── 复杂生活的简单答案，让生活更顺畅。
快应用语法本身提供兄弟跨级组件通信、全局变量、props 等能力；但不同程度上，都存在些许问题：
- 开发者实现 Pub/Sub（订阅）模型：虽然完成了解耦，但操作繁琐；
- 利用框架本身提供的事件绑定接口：耦合性高，不够扁平化，难以维护；
如果您考虑通过全局变量以及 props 跨层级传递的方式，但其弊端相对会更多。在某些复杂业务场景，采取状态模型，基于事件操作驱动数据，基于数据变化更新界面；最合适不过了。在众多状态机相关类库中，有开发者对 vuex 进行了快应用适配：quickapp-vuex（支持了几乎所有的功能，支持 computed, watch, methods）。因此您的快应用项目，可运用 vuex 进行状态管理，用以解决「兄弟跨级组件通信问题」，同时，降低代码之间的耦合性。在使用 quickapp-vuex 时，有发现基于 data 和 getters 皆不能使用数组（前者会导致报错，后者则陷入死循环），使得运用起来稍显不够顺畅；因此有 fork 出来——qa-vuex，对其做了解决，以便开发者可更灵活运用。
- 支持度： 目前测试了部分手机，1010 及其以上都支持；
- 支持机型：vivo | 魅族 | 华为 | 小米 | OPPO 等；
如何安装
yarn add qa-vuex
// OR
npm install qa-vuex --save
如何使用
如果您尚不了解 Vuex，还请先学习下。您也可以参见开源项目：quickapp-vuex-sample。如您需要了解更多，请参见文章：如何在快应用开发中使用 vuex 做状态管理。
// store.js
import Vuex from 'qa-vuex'
import createLogger from './../../node_modules/quickapp-vuex/plugins/logger'
export default new Vuex.Store({
state: {
count: 1314,
recordArr: []
},
getters: {
rightRecordArr () {
return state.recordArr. filter(item => item > 1421)
}
},
mutations: {
increment (state) {
state.recordArr.push(state.count)
state.count ++
},
decrement (state) {
state.recordArr.push(state.count)
state.count --
}
},
plugins: [createLogger()]
})
在 app.ux 入口文件，引入 store.js，并挂到全局对象上，确保 store 只实例化一次。
// app.ux
import store from './store/store.js'
import Vuex from 'qa-vuex'
Vuex.install(store)
组件和页面中使用， 需要包一层 Vuex.Component，其他的和 vuex 用法类似。
<template>
<div class="counter">
<text class="title">{{count}}</text>
<input class="btn" type="button" value="+" onclick="increment" />
<input class="btn" type="button" value="-" onclick="decrement" />
</div>
</template>
<script>
import { mapGetters, mapState, mapMutations, Component } from 'qa-vuex'
export default Component({
computed: {
... mapState(['count', 'recordArr']),
...mapGetters(['rightRecordArr'])
},
methods: {
...mapMutations(['increment', 'decrement'])
}
})
</script>
备注：对于组件内部函数，Vue2 是需要写在 methods 对象内部；而快应用是直接在外层即可，即与 onInit、onShow 等函数同层级。使用 Vuex.Component，以上两种写法都可以，看您喜欢。
computed 和 vue 一样支持 function 和 { get, set }；
watch, 调用快应用的原生 $watch，支持值为 function。
import { Component } from 'qa-vuex'
export default Component({
props: {
title: String
},
watch: {
title: function (newVal, oldVal) {
console.log(newVal, oldVal)
}
}
})
项目示例
源码地址
quickapp-vuex-sample：基于 Vuex 开发出的任务管理快应用：待办清单；它的目标是将任务从您的脑海中移到任务清单，让你专注于当前的工作。
基于 vuex 开发的「待办清单」快应用
我们每天要做的事情都很多，经常会出现想做某个事然后忘掉的情况；待办清单，可以帮我们把要做的事情列出来，一项一项，类似思维导图。把要做的事情在「待办清单」上记录下来，辅之以提醒，就不会轻易忘记。并且，基于它可以让我们实时看到自己已经完成了哪些任务，获得即时满足感；还有哪些任务未完成，更好的规划自己的时间。这里的「待办清单」只是一个模版，提供一些基本功能；您可以在这些基础功能上，自由开发属于自己的 ToDoList 应用。
先决条件
安装快应用开发工具，提供了开发快应用所需要的功能，无需额外安装其它工具和环境。
目录介绍
└── src
│ ├── assets # 公用的资源(Images/Styles/字体...)
│ │ ├──images # 存储 png/jpg/svg 等公共图片资源
│ │ └──styles # 存放 less/css/ 等公共样式资源
│ ├── components # 存放项目所抽离出的组件
│ ├── helper # 项目自定义辅助各类工具
│ ├── pages # 统一存放项目页面级代码
│ ├── store # 存放 vuex（store）相关内容
│ ├── app.ux # 应用程序代码的入口文件
│ └── manifest.json # 配置应用基本信息
└── package.json # 定义项目需要的各种模块及配置信息
项目功能
- ✅支持一键添加新任务；
- ✅标注已完成任务（向左滑动）；
- ✅支持删除单项任务（向左滑动）；
- ✅一键删除已完成任务；
- ✅查看全部、已完成、未完成任务；
项目开发
对于「待办事项」这样一款逻辑较为简单的应用，编码上固然可以在一个文件内写完它；但为使得项目后续更好维护和扩展，又须保证程序可读性，就需要按照一定规则拆分（显示或功能），抽离出多个组件，降低单个文件复杂性。在前文中，已经阐述了 Vuex 的功能、如何使用，以及在快应用中使用它（qa-vuex）的必要性，在这里就不多做赘述。
qa-vuex，在源仓库的基础上，修复了 data、getters 所存在的问题；在 quickapp-vuex-sample 示例项目中，演示了 data、Component、methods、watch、computed、mapState、mapGetters 等功能使用，并通过检测；因此您可以放心在自己的快应用项目中使用。
另外值得一提的是，适用于 Vue 的优化方法，同样也适用于快应用开发。譬如说，在 Vue2 中，高效地处理长数组（静态），可以使用 Object.freeze ，使得数组是只读的，这会阻止修改现有的 property（即不会被添加了一个“观察者”属性），也意味着响应系统无法再追踪变化（这在 Vue2 文档：数据与方法中也有做说明）；同时也会带来些好处──成倍减少堆栈占用大小以及渲染时间。详情可参见文章 Handling long arrays performantly in vue.js；在快应用开发中，您同样可以如此操作来优化。
问题记录
在组件开发中过程中，遇到些问题，以下几点值得您注意下：
tasks-list组件展示添加任务，当任务名过长时，如果设置超出部分显示为省略号；本地预览会出现错误，整行都会显示为省略号，已提交 bug 但还未修复；- 使用 slide-view 组件时，slide-view 组件的 enableslide 属性（是否允许侧滑）默认是 true，可以不添加；但本地预览如果不设置为 true，slide-view 组件将会不能侧滑；
- 本地预览，slide-view 组件中按钮组，点击会报错，已提交 bug 但还未修复。可以采用 touch 方法或者换一种表现形式，来实现侧滑点击功能。
