vue3 使用vuex

创建基本的store仓库

index.js

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";
import user from './modules/user'
import state from "./state"
import mutations from "./mutations"
import getters from "./getters"
import actions from "./actions"

export default createStore({
	plugins: [
		createPersistedState({ storage: window.localStorage }) //配置为sessionStorage，如果不传入对象就是默认
	],

	state,
	mutations,
	actions,
	getters,
	modules: {
		user
	},
})

参考模板链接

模块化开发需要开启命名空间

const user={
namespaced: true,
state:{}
}

以下结构方式 都可以log(store) 具体查看

state

    const vuex_name = computed(() => store.state.name); // 主模块state
    const vuex_user_userName = computed(() => store.state.user.userName); // user模块state

getters

  const vuex_getters_username = computed(() => store.getters.userName);
    const vuex_user_getters_username = computed(
      () => store.getters["user/user_getters_name"]
    );

mutations

// 推荐一
  store.commit("user/setUserInfo", {
        userName: "设置的新名字",
        userId: 789,
      });
// 方式二
const setUserInfo = store._mutations["user/setUserInfo"][0]; 

// 方式三 目前有问题 this有问题 找不到 $store
const { setUserInfo } = mapMutations("user", ["setUserInfo"]); 

actions

// 推荐一
   store.dispatch("user/setUserInfo", {
        userName: "异步设置的新名字",
        userId: 111,
      });

// 方式二
    const asyncSetUserInfo = store._actions["user/setUserInfo"][0];

// 方式三 目前有问题 this有问题 找不到 $store
    const storeActions = mapActions("user", ["setUserInfo"]);