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

绝地灬酷狼 2022-12-12 13:44 430阅读 0赞

### 一、uniapp 引入定义挂载Vuex ###

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

![创建store目录][store]  
代码如下

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'])
    }

[store]: /images/20221123/aaed143f59b64dd1898e060b119fa6ef.png