Cómo usar vuex en uni-app

Vuex está construido en uni-app, solo necesitamos hacer referencia a él.
Primero, cree un directorio de tienda en el directorio raíz y cree index.js en él;
Inserte la descripción de la imagen aquí

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


Luego haga referencia al montaje en 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()


Utilizar en la página
Introducir en guion

import {
    
    mapState,mapMutations} from 'vuex';

Entonces mapState debe escribirse en calculado

<view>{
    
    {
    
    position}}</view>//使用vuex中的值
export default {
    
    
		data() {
    
    
			return {
    
    
				address: "",
			}
		},
		computed: mapState(['position', 'userData'])
	}

mapMutations está escrito en métodos

methods: {
    
    
			...mapMutations(['getPosition', 'getUserData'])
		},
//使用的话直接调用this.getPosition就可以了

Más de 1000 preguntas de la entrevista de front-end recopiladas, escanee el código para verlo, puede usarlo en una entrevista futura

Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/weixin_42981560/article/details/109328098
Recomendado
Clasificación