uniapp快速上手Vuex
官方文档
一、什么是Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（详见官方文档）。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。uni-app 内置了 Vuex 。
vuex 是vue配套的 公共数据管理工具，我们可以将共享的数据保存到 vuex 中，这样方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据。
优势与使用场景
- Vuex的状态存储是响应式的，可跟踪每一个状态变化，一旦它改变，所有关联组件都会自动更新相对应的数据。
- 共享数据，解决了非父子组件的消息传递（将数据存放在state中）。
- 统一状态管理，减少了请求次数，有些情景可以直接从内存中的state获取数据。
Vuex与全局变量区别
| vuex | 全局变量 |
|---|---|
| 不能直接改变store里面的变量，由统一的方法修改数据 | 可以任意修改 |
| 每个组件可以根据自己vuex的变量名引用不受影响 | 全局变量可能操作命名污染 |
| 解决了多组件之间通信的问题 | 跨页面数据共享 |
| 适用于多模块、业务关系复杂的中大型项目 | 适用于demo或者小型项目 |
什么时候需要用vuex？
- 当一个组件需要多次派发事件时。例如购物车数量加减。
- 跨组件共享数据、跨页面共享数据。例如订单状态更新。
- 需要持久化的数据。例如登录后用户的信息。
- 当您需要开发中大型应用，适合复杂的多模块多页面的数据交互，考虑如何更好地在组件外部管理状态时。
项目结构
使用 Vuex 需要遵守的规则：
- 应用层级的状态应该集中到单个
store对象中。 - 提交
mutation是更改状态的唯一方法，并且这个过程是同步的。 - 异步逻辑都应该封装到
action里面。
只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action 、mutation 和 getter 分割到单独的文件。
对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：
├── pages
├── static
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules # 模块文件夹
├── cart.js # 购物车模块
└── products.js # 产品模块
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss
核心概念
每一个 Vuex 应用的核心就是 store（仓库），它包含着你的应用中大部分的状态 (state)。
状态管理有5个核心：state、getter、mutation、action、module。
二、Vuex的安装、引入
这里我们使用npm安装，其他方式在官网中也有说明
npm install vuex --save
引入成功后，项目目录下会有node_moodules/vuex
然后我们创建store（仓库）目录，并在此目录下创建index.js（index.js是用来做状态管理的）
在一个模块化的打包系统中，您必须显式地通过
Vue.use()来安装 Vuex：import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
所以index.js的内容如下
// 在store中的index.js文件就是用来做状态管理的
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
在main.js中引入store ，是store成为全局仓库
import Vue from 'vue'
import App from './App'
// 引入store 使其成为全局仓库
import store from './store'
Vue.prototype.$store = store
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
const app = new Vue({
store,
...App
})
app.$mount()
并在./store/index.js中加上声明
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store= new Vuex.Store({
})
export default store
