uniapp vuex 使用mapState调用取不到值。

最新推荐文章于 2025-10-20 16:53:03 发布

原创最新推荐文章于 2025-10-20 16:53:03 发布 · 6.5k 阅读

2 ·

CC 4.0 BY-SA版权

uniapp 专栏收录该内容

3 篇文章

订阅专栏

本文讲述了在uni-app项目中使用Vuex时，如何解决在index.vue组件中通过mapState映射状态但无法获取到值的问题，涉及Vuex的状态管理及组件间通信的要点。

uniapp vuex 使用mapState调用取不到值。

uni-app自带vuex，所以正确引入即可。
1、新建uniapp项目时，根目录会自动创建store文件夹存放vuex
2、手动创建index.js

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

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
	state: {   //全局变量定义处
		uerInfo: {},
		hasLogin: false,
		forcedLogin: false,//是否强制登录
	},
	mutations: {    //全局方法定义处
		login(state, user) {
			state.hasLogin = true;
			state.uerInfo = user;
			uni.setStorage({//将用户信息保存在本地 
				key: 'uerInfo',
				data: user
			});
		},
		logout(state) {
			state.hasLogin = false;
			state.uerInfo = {};
			uni.removeStorage({
				key: 'uerInfo'
			});
		}
	}
})

export default store

3、配置main.js入口文件

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false
Vue.prototype.$store = store; //挂载在VUE实例上
App.mpType = 'app'

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

4.index.vue调用

<script>
	import{
		mapState, //先导入mapState方法
		mapMutations,
	} from 'vuex'
    export default {
	computed: {
		...mapState([
			'forcedLogin',
			'hasLogin',
			'user'])
	},

	methods:{
		...mapMutations(['login']),
	}

这边有个小坑是，因为我的首页用不到login方法，所以就没有在mothds中去添加

methods:{ …mapMutations([‘login’]), }

导致Index.vue在调用全局变量时取不到值。