2022-3-28 vuex状态管理，modules

引入与使用

// #ifndef VUE3
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// #endif

// #ifdef VUE3
import { createStore } from 'vuex'
const store = createStore({
// #endif

定义vuex的state、mutations、getters、actions：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

mutation 必须同步执行

state: {
	hasLogin:false,
	loginProvider:""
},
mutations:{
	login(state, provider) {
			state.hasLogin = true;
			state.loginProvider = provider;
		},
},
getters:{
	currentColor(state) {
		return state.colorList[state.colorIndex]
	}
},
actions:{
	getPhoneNumber: function({
			commit
		}, univerifyInfo) {
			return new Promise((resolve, reject) => {
				uni.request({
					url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/univerify-login',
					method: 'POST',
					data: univerifyInfo,
					success: (res) => {
						const data = res.data
						if (data.success) {
							resolve(data.phoneNumber)
						} else {
							reject(res)
						}

					},
					fail: (err) => {
						reject(res)
					}
				})
			})
		}
}

使用vuex

import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
computed: {
  ...mapState(['colorIndex', 'colorList']),
    ...mapGetters(['currentColor'])
},
 methods: {
    ...mapMutations(['setColorIndex']),
    ...mapActions(['getPhoneNumber']),
    getUserInf(){
    	this.getPhoneNumber(.....)
    },
}
//也可以使用如下方式：
//获取state的值
this.$store.state.login
//Mutations
this.$store.commit('setColorIndex',123)
//Actions
this.$store.dispatch('getPhoneNumber')

modules导入

//testModules/modules.js
//1
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context("./modules", true, /\.js$/);
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});

export default{
  namespaced: true,
  modules,
};
//2
import _ from "lodash";

const files = require.context("./", false, /\.js$/);
const modules = {};

files.keys().forEach(key => {
  if (key === "./index.js") return;
  _.mergeWith(modules, files(key).default);
});
export default modules;

//modules/test.js
//1
const state = {
  userId: "",
  userName: "",
};
const getters = {
  getUserInfo () {
    return state;
  },
};
const mutations = {
  setUserInfo (state, payload) {
    state.userId = payload.userId;
    state.userName = payload.userName;
  },
};
const actions = {
	
};
export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
};
//2
import Vue from "vue";
import _ from "lodash";
// import { doLogin } from "@/api/index.js";
export default {
  // namespaced: true,
  state: {
    token: "",
    userId: "",
    userName: "",
    user: null,
  },
  mutations: {
    setToken (state, data) {
      state.token = data;
      Vue.prototype.$cache.set("token", data, 0);
    },
    login (state, user) {
      state.user = user;
      state.userId = user.userId;
			    state.userName = user.userName;
      // 缓存用户信息
      Vue.prototype.$cache.set("_userInfo", user, 0);
    },
    logout (state) {
      state.user = null;
      // 清理缓存用户信息
      Vue.prototype.$cache.delete("token");
      Vue.prototype.$cache.delete("_userInfo");
    },
    setUniverifyLogin (state, payload) {
		  typeof payload !== "boolean" ? payload = !!payload : "";
		  state.isUniverifyLogin = payload;
    },
    setUniverifyErrorMsg  (state, payload = "") {
		  state.univerifyErrorMsg = payload;
    },
  },
  actions: {
    setUniverifyLogin (context) {
		  context.commit("setUniverifyLogin");
    },
    autoLogin ({ commit, getters, dispatch }) {
      // 判断本地是否有账号信息，如果有，就自动重新登录
      if (getters.user && getters.user.id && getters.user.name && getters.user.passwd) {
        const params = {
          name: getters.user.name,
          passwd: getters.user.passwd,
        };
        uni.showLoading({
          title: "自动登录中...",
        });
        dispatch("login", params).then(res => {
          uni.hideLoading();
          // uni.showToast({
          // 	title: '已自动登录！',
          // 	icon: 'success'
          // })
        }).catch(() => {
          uni.hideLoading();
          uni.showToast({
            title: "会话过期，请重新登录！",
            icon: "none",
          });
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/login/login",
            });
          }, 1000);
        });
      } else {
        // 如果本地没有账号信息，就提示用户必须登录
        uni.showModal({
          title: "未登录",
          content: "您未登录，需要登录后才能继续",
          showCancel: false,
          confirmText: "确定",
          success: res => {
            if (res.confirm) {
              uni.reLaunch({
                url: "/pages/login/login",
              });
            }
          },
        });
      }
    },
    login ({ commit }, params) {
      return new Promise((resolve, reject) => {
        Vue.prototype.$userApi.doLogin(params).then(res => {
          if (res.ok()) {
            let tmp = { ...params, ...res.data };
            commit("login", tmp);

            // 关于消息推送的保存
            // 保存clientid到服务器
            // #ifdef APP-PLUS
            const clientInfo = plus.push.getClientInfo();
            let pushUser = {
              clientid: clientInfo.clientid,
              appid: clientInfo.appid,
              appkey: clientInfo.appkey,
              userName: tmp.userName,
              userRole: tmp.roleStr,
            };
            // 提交api请求，服务端保存客户端角色信息
            // Vue.prototype.$minApi.savePushUser(pushUser)
            // #endif

            resolve(res);
          } else {
            reject(res);
          }
        }).catch(err => {
          reject(err);
        });
      });
    },
    logout ({ commit }) {
      commit("logout");
      uni.reLaunch({
        url: "/pages/login/login",
      });
    },
  },
  getters: {
    user: state => {
      if (state.user) {
        return state.user;
      }
      return Vue.prototype.$cache.get("_userInfo");
    },
  },
};

//store.js
const dubg = process.env.NODE_ENV !== "production";
import state from "./state.js"
import * as getters from "./getters.js"
import * as mutations from "./mutations.js"
import * as actions from "./actions.js"

//引入自定义的模块
const dubg = process.env.NODE_ENV !== "production";

//引入自定义的模块
import modules from "./modules/index.js"
console.log("modules=====", modules);
// #ifndef VUE3
import Vue from "vue"
import Vuex from "vuex"
import {createLogger} from "vuex"
Vue.use(Vuex)
// #endif

// #ifndef VUE3
const store = new Vuex.Store({
// #endif
// #ifdef VUE3
import { createStore,createLogger } from "vuex"
const store = createStore({
// #endif
  plugins: dubg ? [createLogger()] : [], // 或者写 [createLogger()]
  strict: dubg, // 严格模式，禁止在actions中修改state中的数据.不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。
modules:{
	modules
}
		
})

export default store

使用：

//1
 this.$store.commit("testModules/userInfo/setUserInfo", {userId: "3232", userName: "小计划"});
 this.$store.commit("testModules/userInfo/nest/setUserInfo", {userId: "323322", userName: "22小计划"});
 //2
 methods:{
	outlogin () {
      this.$store.dispatch("logout");
    },
    async login () {
      let res = await this.$store.dispatch("login", {userId: "3232", userName: "小计划"});
      this.$cache.set("token", res.token, 0);
    },
}