uniapp 中 vuex 的使用

项目中需要监控登录状态，尝试用缓存解决，但缓存获取无法实现所有页面实时刷新，遂放弃后采用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
  }
}

4、组件化（小项目暂时不需要用到，用到了再详细记录）