如何在uni-app中使用vuex

喜欢ヅ旅行 2022-11-20 09:37 407阅读 0赞

在uni-app中内置了vuex，我们只需要引用就行了  
首先在根目录下创建store目录在里面创建index.js；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70_pic_center]

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    const store = new Vuex.Store({ 
    	state: { 
    		hasLogin: false,
    		userInfo: { }
    	},
    	mutations: { 
    		login(state, provider) { 
    			state.hasLogin = true;
    			state.userInfo = provider;
    			uni.setStorage({  //缓存用户登陆状态
    				key: 'userInfo',
    				data: provider
    			})
    		},
    		logout(state) { 
    			state.hasLogin = false;
    			state.userInfo = { };
    			uni.removeStorage({ 
    				key: 'userInfo'
    			})
    		}
    	},
    	actions: { 
    
    	}
    })
    
    export default store

然后在main.js中引用挂载

import Vue from 'vue'
    import App from './App'
    
    import store from './store'
    
    Vue.config.productionTip = false
    
    Vue.prototype.$store = store
    
    App.mpType = 'app'
    
    const app = new Vue({ 
    	store,
    	...App
    })
    app.$mount()

在页面中使用  
在script中引入

import { mapState,mapMutations} from 'vuex';

然后mapState必须写在 computed中

<view>{ { position}}</view>//使用vuex中的值
    export default { 
    		data() { 
    			return { 
    				address: "",
    			}
    		},
    		computed: mapState(['position', 'userData'])
    	}

mapMutations写在methods里面

methods: { 
    			...mapMutations(['getPosition', 'getUserData'])
    		},
    //使用的话直接调用this.getPosition就可以了

## 收集的前端面试题 1000+ 扫码查看，以后面试可以用上 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/43667bf1adad4c92820047db3475c4f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/7dbe07ef9bc942a8a4680588d9d426d0.png