代码链接-GitHub

xuegao-submit-issues/vue3-example at diy_reactice_vuex · WarriorFromLongAgo/xuegao-submit-issues (github.com)

背景

vue2中，我们经常的使用vuex状态管理器，采用集中式存储的所有组件状态，通过vuex我们可以解决组件之间数据共享的问题

进入vue3之后，想的是尽量少的引入外部包，看了看reactive，好像是可以满足要求的。于是就有了此文章

主要分为三个类

拉下来代码后，请查看这三个类

DemoBO.ts

说明：放在reactive里面的对象信息，会实时的改变

import { reactive } from "vue";

interface IDemo {
  count: number;
  tempNameList: Array<string>
}

const demo: IDemo = {
  count: 0,
  tempNameList: ["1", "2", "3"]
};

function createState() {
  return reactive(demo);
}

export { demo, IDemo, createState };

DemoStore.ts

说明：外部使用的时候，直接引入useDemoStore对象即可

import {readonly} from "vue";
import {createState} from "@/store/DemoBO";
import {createAction} from "@/store/DemoAction";

const state = createState();
const action = createAction(state);

export const useDemoStore = () => {
  return {
    state: readonly(state),
    action: readonly(action),
  };
};

DemoAction.ts

说明：对外提供方法action

import {IDemo} from "@/store/DemoBO";

function incrementCount(state: IDemo) {
  return () => {
    console.log("DemoAction state count state ", JSON.stringify(state));
    console.log("DemoAction state count 1 ", state.count);
    let count = state.count;
    state.count = ++count;
    // state.count += state.count;
    console.log("DemoAction state count 2 ", state.count);
  };
}

function getState(state: IDemo) {
  return () => {
    return state;
  };
}

function updateCount(state: IDemo) {
  return (count: number) => {
    state.count = count;
  };
}

function pushTempNameList(state: IDemo) {
  return (inputName: string) => {
    state.tempNameList.push(inputName);
  };
}

/**
 * 创建Action
 */
export function createAction(state: IDemo) {
  return {
    incrementCount: incrementCount(state),
    getDemo: getState(state),
    updateCount: updateCount(state),
    pushTempNameList: pushTempNameList(state),
  };
}

使用例子

引入
import {useDemoStore} from "@/store/DemoStore";
let demoStore = useDemoStore();

无参数调用
demoStore.action.incrementCount();
有一个参数，调用
demoStore.action.pushTempNameList(tempNameInt.toString());
demoStore.action.updateCount(this.updateCount);

【实战篇】vue3中使用reactive替代vuex