Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，所以 uni-app 项目中也可以使用 Vuex 。

Vuex 官网：https://vuex.vuejs.org/zh/

引入 Vuex

1. 打开一个 uniapp 项目

2. 在项目目录下用 npm 安装 vuex

   npm install vuex --save

3. 在项目根目录下创建 store 文件夹，在 store 文件夹中创建 index.js

   

4. 在 index.js 中 显式地通过 Vue.use() 来安装 Vuex ：

   【index.js】

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)

5. 在 index.js 中创建 store

   const store = new Vuex.Store({
     state: {
       // 存放状态
     },
     getters: {
       // state的计算属性
     },
     mutations: {
       // 更改state中状态的逻辑，同步操作
     },
     actions: {
       // 提交mutation，异步操作
     },
     // 如果将store分成一个个的模块的话，则需要用到modules。
     //然后在每一个module中写state, getters, mutations, actions等。
     modules: {
       a: moduleA,
       b: moduleB,
       // ...
     },
   });

6. 在 index.js 中导出 store

   export default store

7. 在 main.js 中引入 store 并挂载

   

使用 Vuex

【index.js】

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		// 存放状态
		count:0,
		test:'这是store.js中的数据'
	},
	getters: {
		// state的计算属性
		//用 this.$store.getters.getData()读取
		getData(state){
			return state;
		}
	},
	mutations: {
		// 更改state中状态的逻辑，同步操作
		//用 this.$store.commit('function_name',payload) 使用，若无参数则不写payload
		add(state,n){
			state.count += n;
		}
	},
	actions: {
		// 提交mutation，异步操作
	}
})

export default store