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