如何在快应用开发中使用 vuex 做状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。如果您需要构建一个中大型单页应用，尤其是涉及多个页面需要共享数据，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。与 Vue 一样，快应用也是基于MVVM 的设计模式，因此略作适配，Vuex 也适用于快应用开发。本文旨在与大家分享：如何在快应用开发中使用 vuex 做状态管理。

qa-vuex：快应用开发的状态管理

目标与理念

快应用是基于手机硬件平台的新型应用形态，标准是由主流手机厂商组成的快应用联盟联合制定。其标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台，以平台化的生态模式对个人开发者和企业开发者全品类开放。快应用具备传统 APP 完整的应用体验，无需安装、即点即用；覆盖 10 亿设备，与操作系统深度集成，探索新型应用场景。快应用 ── 复杂生活的简单答案，让生活更顺畅。

快应用语法本身提供兄弟跨级组件通信、全局变量、props 等能力；但不同程度上，都存在些许问题：

1. 开发者实现 Pub/Sub（订阅）模型：虽然完成了解耦，但操作繁琐；
2. 利用框架本身提供的事件绑定接口：耦合性高，不够扁平化，难以维护；

如果您考虑通过全局变量以及 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 方法或者换一种表现形式，来实现侧滑点击功能。

猜您可能感兴趣的文章

• 快应用 IDE 配置 babel.config.js 的前世今生
• 快应用开发工具入门介绍
• Chrome 为何无法通过 url 拉起快应用？
• 团队开发快应用，如何统一代码风格？
• 如何用 Prettier 美化您的快应用代码？
• 如何通过 IDE 的预检测功能提高审核通过率
• 如何优雅地配置快应用的代码片段
• 如何基于 Typescript 开发快应用
• 快应用开发中，如何区分各种环境？
• 快应用官方加载动画库：qa-spin