uni-app中使用vuex管理数据

由于uni-app中已经内置了vue和vuex，因此不需要npm下载安装，下面直接说明引入和使用

1.在根目录下创建store目录，并在store目录下创建index.js

2.在store/index.js中写入如下代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{//存放状态
        "username":"foo",
        "age":18
    },
	mutations:{
		setUsernam(state,msg){
			state.username=msg
		}
	}
})

export default store

 3. 在main.js中引入和挂载

import Vue from 'vue'
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
	store,
	...App
})

 4. 测试简单的使用

	changeStore(){
				console.log(this.$store.state.username)//foo
				this.$store.commit("setUsernam","huangzhizhen")
				console.log(this.$store.state.username)//huangzhzizhen
			},

5. 使用举例(store/index.js)

 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	//相当于data
	state: {
		hasLogin: false,
		_token:'',
		userInfo: {}
	},
	//相当于computed
	getters: {
		reverseLoginStatus(state) {
			return state.loginStatus + 1
		}
	},
	//相当于methods,是直接操作state中变量的方法
	mutations: {
		//登录时候保存token值
		getToken(state, provider) {
			state._token=provider
			uni.setStorage({
				key:'_token',
				data:provider
			})
		},
		//保存用户基本信息
		userInfo(state,provider){
			//保存用户信息
			//下面根据信息可添加
			state.hasLogin = true;
			state.userInfo.phone = provider.phone;
			state.userInfo.userName = provider.name;
			state.userInfo.token = provider.token;
			uni.setStorage({
				key:'userInfo',
				data:provider
			})
		},
		//退出登录
		loginOut(state) {
			state.hasLogin = false;
			state.userInfo={};
			uni.removeStorage({
				key:'userInfo'
			})
		}
	},
	//可以同时执行多个mutations方法
	actions: {
		loginStatusAction(context, playload) {
			console.log(playload)
			context.commit('changeLoginStatus', {
				num: playload.number
			})
		}
	}
})