0
点赞
收藏
分享

微信扫一扫

如何在uni-app中使用vuex

在uni-app中内置了vuex,我们只需要引用就行了
首先在根目录下创建store目录在里面创建index.js;
如何在uni-app中使用vuex_ide

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就可以了



举报

相关推荐

0 条评论