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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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在调用全局变量时取不到值。

### 实现 UniApp 全局弹窗组件 #### 使用 `vuex` 和自定义组件实现全局弹窗 为了实现在 UniApp 中可以全局调用的弹窗组件,可以通过 Vuex 来管理状态并结合自定义组件完成。以下是具体实现方案: 1. **创建自定义弹窗组件 (`GlobalModal.vue`)** 创建一个名为 `GlobalModal.vue` 的文件作为全局弹窗组件。 ```vue <template> <view v-if="visible" class="modal-overlay"> <view class="modal-content"> <text>{{ message }}</text> <button @click="close">关闭</button> </view> </view> </template> <script> export default { props: { visible: Boolean, message: String }, methods: { close() { this.$emit('update:visible', false); } } }; </script> <style scoped> .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .modal-content { padding: 20px; background-color: white; border-radius: 8px; text-align: center; } </style> ``` 2. **配置 Vuex 状态管理** 在项目的 `store/index.js` 文件中设置 Vuex 状态用于控制弹窗显示与否以及传递消息内容。 ```javascript import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { modalVisible: false, modalMessage: '' }, mutations: { showModal(state, message) { state.modalMessage = message; state.modalVisible = true; }, hideModal(state) { state.modalVisible = false; } }, actions: { toggleModal({ commit }, payload) { if (payload && typeof payload === 'string') { commit('showModal', payload); } else { commit('hideModal'); } } } }); export default store; ``` 3. **在 App.vue 中注册全局弹窗组件** 将上述创建好的 `GlobalModal.vue` 注册到应用根节点以便于全局访问。 ```vue <template> <view> <!-- 应用主体 --> <router-view></router-view> <!-- 全局弹窗 --> <global-modal :visible.sync="modalVisible" :message="modalMessage"></global-modal> </view> </template> <script> import GlobalModal from './components/GlobalModal.vue'; import { mapState, mapMutations } from 'vuex'; export default { components: { GlobalModal }, computed: { ...mapState(['modalVisible', 'modalMessage']) }, methods: { ...mapMutations(['toggleModal']) } }; </script> ``` 4. **通过 JavaScript 调用弹窗** 在任意页面或逻辑中可通过以下方式触发弹窗展示。 ```javascript this.$store.dispatch('toggleModal', '这是一个全局弹窗!'); // 关闭弹窗 setTimeout(() => { this.$store.dispatch('toggleModal'); }, 3000); // 自动关闭延迟时间可根据实际需求调整 ``` 以上代码实现了基于 Vuex 的全局弹窗功能[^1],并且能够通过 JavaScript 动态调用来显示和隐藏弹窗[^2]。 --- #### 注意事项 - 微信小程序环境下的 body 元素被屏蔽,因此该方法不适合直接应用于微信小程序场景下。 - 如果需要更复杂的动画效果,在当前技术条件下可能无法完全适配所有平台的小程序特性[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值