在uni-app中内置了vuex,我们只需要引用就行了
首先在根目录下创建store目录在里面创建index.js;
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就可以了
收集的前端面试题 1000+ 扫码查看,以后面试可以用上
WX搜索 【MST题库】小程序查看