【uni-app】Vuex介绍和使用

无论你是使用 HX 还是使用 vue-cl i创建的uniapp项目,都已内置 Vuex ,无需再进行安装

uni-app也像小程序一样有 globalData ，这是一种简单的 全局变量 机制

globalData 是简单的全局变量，如果使用状态管理，请使用 vuex

项目文件结构

1.在 main.js 中导入store文件。

2.组装模块并导出 store

3.定义cart.js模块(这里以购物车为例)

4.定义根级别的getters

5.使用

查看下效果

点击添加按钮

1.HbuilderX创建项目，选择uni-app，选择默认模板1.HbuilderX创建项目，选择uni-app，选择默认模板

2.配置appId

3.vuex

uni-app 内置了 vuex。但是需要结合第三方来一起协作。默认的模板项目首先是没有node-modules模块依赖的，首先需要初始化webpack，然后建store文件夹，在main.js中引入

4.创建自己习惯的目录结构

5.配置微信开发者工具路径

点击 运行 ->运行到小程序模拟器 ->微信开发者工具

Minax是一个专为小程序开发的状态管理库，它采用集中式存储管理应用的所有组件的状态，

并能够配置是否与缓存做绑定，使用方式类似与Vuex。通常可以用来解决多个试图共享同一

状态或者多个试图需要变更同一状态的场景。

针对2.2.1以下基础库版本，请将本库的dist目录复制到您的项目中，然后适用require或者import的方式引用即

或者

由于小程序的文件夹默认不采用npm的形式，所以第一步需要将小程序项目初始化成npm项目

然后根据你的包管理工具使用

或者

安装成功后，点击开发者工具中的菜单栏：工具 -->构建 npm

勾选“使用 npm 模块”选项：

构建完成后即可使用 npm 包,js 中引入 npm 包：

Minax库的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state以及action)。

Minax 和单纯的全局对象有以下两点不同：

Minax 的状态存储是基于发布订阅模式的，当页面或组件从 中设置了 mapState 时，相当于向store订阅了该状态，若 store 中的状态发生变化，那么相应的组件、页面也会相应地得到高效更新。

你不能直接改变 store 中的状态，改变 store 中的状态的唯一途径就是显式地提交发布 (commit)，这样使得我们可以方便地跟踪每一个状态的变化。

我们建议在项目建一个store/index.js文件，一个简单的store编写如下：

现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：

在项目的app.js中，将store引入

在Page、Component、Behavior中配置mapState属性，其对应的值为一个字符串或者字符串数组

mapState: ['cartCount', 'mark'],

或者

mapState: 'cartCount'，经mapState处理过的属性等效于设置月data中，您可以通过this.data.cartCount获取，也可以通过this.$store.state.cartCount获取

在wxml中，直接绑定改值既可

看到这里，你应该已经基本掌握本库的使用了

state是Minax的全部状态源，我们通过在state中设置的key来绑定状态，其有两个特性：

Minax支持于缓存绑定的模式，这一点你只需要知道即可，因为你无需 *** 作缓存，这一切都由store帮你做好，初始化时会自动读取，更新时会自动写入，而你要做的知识在bindStorageMode等于true时，配置state的持久化属性即可

action通常用于处理异步事物（你实在要同步使用我也没办法）

使用时

好啦，暂时先到这里，你可以愉快的coding啦

---