uniapp Vuex 状态管理模式基本使用

一、uniapp 引入定义挂载Vuex

1、在根目录下建立store目录创建index.js文件

代码如下

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

Vue.use(Vuex)

export default new Vuex.Store({
	//相当于data
	state:{ 
		loginStatus:false
	},
	//相当于computed
	getters:{
		reverseLoginStatus(state){
		    return state.loginStatus + 1
		}
	},
	//相当于methods
	mutations:{ 
		changeLoginStatus(state,playload){
			state.loginStatus = playload.num;
		}
	},
	//可以同时执行多个mutations方法
	actions:{
		loginStatusAction(context,playload){
			console.log(playload)
			context.commit('changeLoginStatus',{num: playload.number})
		}
	}
})

2、在mian.js 中挂载store

import Vue from 'vue'
import App from './App'
import store from './store/index.js' // 引入

Vue.prototype.$store = store // 定义成全局组件

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	store, //挂载
    ...App
})
app.$mount()

二、uniapp中使用vuex

1、直接调用state中的值

this.$store.state.loginStatus

2、修改state中的值

这里需要在mutations中定义修改的方法，如上changeLoginStatus

this.$store.commit('changeLoginStatus',{num:123,age:12}) //调用vuex中的mutations方法

3、调用actions中的方法

this.$store.dispatch('loginStatusAction',{number:123}) //调用vuex中的actions方法

4、调用getters中的方法

this.$store.getters.reverseLoginStatus //调用vuex中的getters方法

5、状态方法监控

//导入vuex的mapState跟mapMutations方法
import {mapState,mapMutations} from 'vuex'

methods: {
	//对全局方法changeLoginStatus进行监控
	...mapMutations(['changeLoginStatus'])
},
computed:{
	//对全局变量loginStatus进行监控
	...mapState(['loginStatus'])
}