Uni-app实现全局状态管理

一）创建交store的目录在下面创建一个js文件（然后书写下面代码）;

//1、导入相关库
import Vue from 'vue';
import Vuex from 'vuex';

//导入那些已经写好的模块：（后面代码会讲解下面这行代码）
import test from './modules/test.js'

//2、安装vuex插件
Vue.use(Vuex);
//3、创建store实例
const store = new Vuex.Store({
	modules:{
		test//是已经写好的模块(后续讲解)
	}
});

export default store;

二）在main.js中进行挂载

//1、导入刚刚写的store文件夹
import store from './store';

//2、在app处进行挂载
const app = new Vue({
	...App,
	//挂载实例
	store
})

三）此时创建自己的模块：

在store文件夹下创建一个modules文件夹里面存放模块。

 

export default {
	//1、必须先指定命名空间：
	namespaced:true,
	//2、通过state来声明变量数据：
	state:()=>{
		return{
			msg:'我成功了'
		}
	}，
    //3、创建方法，用于修改state中的数据(state中的数据只能通过下面方法中的函数进行修改)
	mutations: {
        //所有mutations里面定义的方法第一个参数都必须是state，并且传参的时候不用传
		//state就是上面定义的state，访问里面的数据可以state.msg即可
		//在传参的时候只需要穿value即可，state可以不用传递
		testMethod(state, value) {
            //在模块中调用模块的方法，必须使用this.commit方法，第一个参数是'模块名/方法名'，第二个参数若有参数就传参
			this.commit('test/change',value)//调用下面的change，直接写change(value)不能调用
		}
		change(state,val){
			if(val==1)
				state.msg = '我变了'
		}
	}
}

四）最后到使用页面进行注册

//导入vuex中全局状态管理相关函数(固定代码)：
//1、mapState用于访问变量的，mapMutations用于访问模块中的函数
import{mapState，mapMutations} from 'vuex'

export default {
	methods: {
        //导入全局状态管理里的函数
	    //参数1是模块名称，参数二是要导入里面的方法，今后只用就和已经定义好的方法使用一样
	    ...mapMutations('test',['testMethod'])
        
        //测试使用
		testss(){
			this.testMethod(1)
		}

    },

    //导入全局状态管理里的方法
	computed:{
		//在computed中通过mapState函数，注册state中的数据，导入之后可以像data中的一样直接使用
		//参数一是模块名称，第二个是一个要导入数据的数组
		...mapState('test',['msg'])
	}

};

之后就可以像data中的数据一样使用了。

{{msg}}