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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐