Vuex 是专门为 Vue.js 应用程序开发的状态管理模式。 它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式发生变化。 如果你需要构建一个中型到大型的单页面应用程序，特别是涉及到需要共享数据的多个页面，你很可能会考虑如何更好地管理组件外部的状态，Vuex 将成为自然的选择。 和 Vue 一样，快速应用也是基于 MVVM 设计模式，因此经过一些适配，Vuex 也适合快速应用开发。 本文旨在与大家分享：如何在快速应用开发中使用vuex进行状态管理。
快速应用开发中如何使用vuex进行状态管理 qa-vuex：快速应用开发的状态管理目标和理念
快应用是基于手机硬件平台的新型应用形式。 该标准由主流手机厂商组成的快应用联盟共同制定。 其标准的诞生，将在研发接口、能力接入、开发者服务等层面构建标准平台，以平台化的生态模式向个人开发者和企业开发者开放全品类。 快应用拥有传统APP完整的应用体验，无需安装，即点即用； 覆盖10亿设备，与操作系统深度融合，探索新的应用场景。 快速应用——简单解答复杂生活，让生活更顺畅。
快速应用语法本身提供了同级跨级组件通信、全局变量、props等能力； 但不同程度地存在一些问题：
开发者实现Pub/Sub（订阅）模式：虽然完成了解耦，但操作繁琐；
利用框架本身提供的事件绑定接口：耦合度高、不够扁平、难以维护；
如果考虑跨级别传递全局变量和props，缺点相对较多。 在一些复杂的业务场景下，采用状态模型vuex存放全局变量，基于事件操作驱动数据，基于数据变化更新界面是最合适的。 在众多状态机相关的库中，一些开发者将 vuex 适配为快速应用：quickapp-vuex（支持几乎所有功能，包括计算、监视和方法）。 因此，你的快速应用项目可以使用vuex进行状态管理，解决“兄弟跨级组件通信问题”，同时减少代码之间的耦合。 使用quickapp-vuex时，发现基于data和getter无法使用数组（前者会报错，后者会陷入死循环），使用起来稍显不太流畅； 因此，出现了一个fork – qa-vuex，为它解决了，以便开发者可以更灵活地使用它。
如何安装
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 支持 function 和 { get, set } 就像 vue 一样；
watch，调用快应用原生$watch。 支持的值是函数。
import { Component } from 'qa-vuex'
export default Component({
props: {
title: String
},
watch: {
title: function (newVal, oldVal) {
console.log(newVal, oldVal)
}
}
})
项目示例源码地址
fastapp-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 # 定义项目需要的各种模块及配置信息
项目功能项目开发
对于像“To Do List”这样逻辑比较简单的应用，从编码上来说是可以写在一个文件中的； 但为了使项目以后更容易维护和扩展，并保证程序的可读性vuex存放全局变量，需要遵循一定的流程。 规则拆分（显示或功能）提取多个组件并降低单个文件的复杂性。 上一篇文章已经讲解了Vuex的功能、如何使用以及在快速应用中使用它（qa-vuex）的必要性，这里不再赘述。
qa-vuex，基于源码仓库，修复了data和getters的问题； 在quickapp-vuex-sample示例项目中，演示了data、Component、methods、watch、compute、mapState、mapGetters等函数的使用。 并通过了测试； 因此您可以放心地在您的快速应用项目中使用它。
另外值得一提的是，适用于Vue的优化方法也适用于快速应用开发。 例如，在Vue2中，为了高效处理长数组（静态），可以使用Object.freeze使数组只读，这将防止现有属性被修改（即不会添加“观察者”属性） ) )，这也意味着响应系统无法再跟踪更改（这在 Vue2 文档：数据和方法中也有解释）； 它还会带来一些好处——以指数方式减少堆栈大小和渲染时间。 在快速应用开发中，你也可以做同样的事情来优化。
问题记录
在组件开发过程中，您会遇到一些问题。 以下几点值得您关注：
暂无评论内容