如何在uni-app中使用vuex

在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中引入

然後mapState必須寫在 computed中

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

mapMutations寫在methods裡面

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