uniapp vuex 使用mapState调用取不到值。
uniapp vuex 使用mapState调用取不到值。uni-app自带vuex,所以正确引入即可。1、新建uniapp项目时,根目录会自动创建store文件夹存放vuex2、手动创建index.jsimport Vue from 'vue'import Vuex from 'vuex'//挂载VuexVue.use(Vuex)//创建VueX对象const store = new 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在调用全局变量时取不到值。
更多推荐
已为社区贡献1条内容
所有评论(0)