项目中需要监控登录状态，尝试用缓存解决，但缓存获取无法实现所有页面实时刷新，遂放弃后采用vuex
安装
// uniapp 官方已经默认安装了 vuex，不需要再次安装
// npm install vuex --save
使用
1、 在项目根目录下新建store文件夹，再在store文件夹内新建index.js，写入以下内容
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
/* 此处存储数据 */
state: {
loginAuth: 0, // 用户权限
loginInfo: {} // 用户信息
},
/*
* 包装类，此处用于包装 state 中数据，类似于页面组件中的计算属性
* getters 是唯一可以取 state 值的方法
*/
getters: {
loginAuth(state, getters) {
return state.loginAuth
},
loginInfo(state, getters) {
return state.loginInfo
},
}
/**
* 唯一修改 state 值方法，会造成同步阻塞
* 此处用于处理state中数据，存放方法类似页面组件中的 methods
* state 中所有数据的修改都应该通过 mutations 内方法实现
* 第一个形参永远都是 state
* 第二个形参是调用此方法时传递的参数
*/
mutations: {
updateAuth(state, auth) {
state.loginAuth = auth;
},
updateInfo(state, info) {
state.loginInfo = info;
},
logOut(state) {
state.loginAuth = 0;
state.loginInfo = {}
}
},
/**
* 异步方法
* 调用 mutations 方法，实现异步更新 state 数据*
* 第一个形参永远都是 context
* 第二个形参是调用此方法时传递的参数
*/
actions: {
asyncUpdateAuth(context, Auth) {
context.commit('updateAuth', auth)
}
},
})
export default store
2、在main.js中引入并挂载使用store
import App from './App'
// 引入vuex
import store from './store'
// 把vuex定义成全局属性
Vue.prototype.$store = store
const app = new Vue({
...App,
store // 挂载store
})
3、页面/组件中使用
3.1、获取 state 中数据（三种方式）
// 直接获取
// 简单易懂，数据如果在当前页面不需要实时刷新，仅仅获取可以尝试
// 如果用此种方式，可以在computed中定义一个计算属性，绑定到需要用到数据的地方，也可以实现实时刷新
this.$store.state.xxx
// 导入 state 对象，映射到 computed
// 由于computed的存在，数据可以实时刷新
import { mapState } from ‘vuex’
computed: {
...mapState(['loginAuth','loginInfo']), //使用时与data中数据方式相同
}
// 导入 getters 包装对象，映射到 computed
// 由于 computed 的存在，数据可以实时刷新
// 同时 getters 可以对数据进行处理，得到想要的数据格式
import { mapGetters} from ‘vuex’
computed: {
...mapGetters(['loginAuth','loginInfo']), // 使用时与 data 中数据方式相同
}
3.2、使用 mutations 内方法（设置 state 中数据）(2种方式)
// 直接调用 mutations 中方法
// 简单易懂，在需要设置数据的地方直接调用即可，但需要反复调用时不方便
this.$store.commit('setInfo', loginRes);
// 导入mapMutations，映射到 methods 中
// 由于 vue 的特性，在 main.js 中无法获取到 store 对象，所以无法使用此种方式（可能是我使用方式不对，赶时间未具体测试）
import { mapMutations } from 'vuex'
methods:{
...mapMutations(['setAuth']),
test(){
this.setAuth(data) // 此处调用映射的 setAuth 方法传递参数data
}
}
