uniapp中的Vuex

一：vuex。
1，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
2，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
3，Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
4，vuex官网。

二：例子。
1，在 uni-app 项目根目录下新建 store 目录，在 store 目录下创建 index.js 定义状态值。

2，index.js，由于uniapp内部已经内置了vuex，只要正确引用就可以。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store ({
	// 全局属性变量
	state: {
		num:0,
		price:10,
		name:"苹果",
		testList:[]
	},
	// 全局同步方法；调用方法，this.$store.commit("xxx")
	mutations: {
		add(state){
			state.num++
		}
	},
	// vuex属性计算，在视图里当变量使用
	getters: {
		count(state){
			// 这个函数的执行依赖一个可变的变量
			return state.num*state.price;
		}
	},
	// 异步方法；调用方法，this.$store.dispatch("xxx")
	actions: {
		testActions(context){
			// context里边包含了state,mutations,getters,actions
			// 执行一些异步参数,通用ajax
			setTimeout(()=>{
				context.state.testList=["喜羊羊","美羊羊","沸羊羊","懒羊羊"]
			},2000);
		}
	}
})

export default store

3，main.js 引入和挂载。

4，测试页面。

页面引用：



效果：