Como usar vuex em uni-app

Vuex é construído em uni-app, só precisamos referenciá-lo.
Primeiro, crie um diretório de armazenamento no diretório raiz e crie index.js nele;
Insira a descrição da imagem aqui

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


Em seguida, faça referência à montagem em 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()


Use na página
Apresente no script

import {
    
    mapState,mapMutations} from 'vuex';

Então mapState deve ser escrito em computador

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

mapMutations é escrito em métodos

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

Mais de 1000 perguntas de entrevista de front-end coletadas, escaneie o código para visualizar, você pode usá-lo em uma entrevista futura

Insira a descrição da imagem aqui

Acho que você gosta

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