uniapp快速上手Vuex

一、什么是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