一、什么是Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（详见官方文档）。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。uni-app 内置了 Vuex 。
vuex 是vue配套的 公共数据管理工具，我们可以将共享的数据保存到 vuex 中，这样方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据。
优势与使用场景
- Vuex的状态存储是响应式的，可跟踪每一个状态变化，一旦它改变，所有关联组件都会自动更新相对应的数据。
- 共享数据，解决了非父子组件的消息传递（将数据存放在state中）。
- 统一状态管理，减少了请求次数，有些情景可以直接从内存中的state获取数据。
Vuex与全局变量区别
什么时候需要用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
