Vue3状态管理的使用详解

// src/context/calculator.ts

import { ref, inject, provide, readonly } from 'vue';

type Calculator = {
    count: number;
    increase: () => void;
    updateCount: (num: number) => void;
};

//provide的key,唯一令牌
const CalculatorSymbol = Symbol();

//提供者
export const calculatorProvide = () => {
  	//数目
    const count = ref<number>(1);
  	//递增方法
    const increase = () => {
        count.value++;
    };
   //更新方法
    const updateCount = (num: number) => {
        count.value = num;
    };
  	//提供的共享状态对象
    const depends = {
        count: readonly(count), //状态只读，通过方法进行修改
        increase,
        updateCount
    };
  	//使用provide api实现状态对象提供
    provide(CalculatorSymbol, depends);
  	//返回状态对象，让同级可调用
    return depends;
};

//注入方法
export const calculatorInject = () => {
    //使用inject api注入状态
    const calculatorContext = inject<Calculator>(CalculatorSymbol);
  	//未共享就注入的错误校验
    if (!calculatorContext) {
        throw new Error('Inject must be used affer Provide');
    }
  	//返回注入的贡献状态
    return calculatorContext;
};

// src/main.ts

import { createApp, h } from 'vue';
import App from '@/App.vue';
import { calculatorProvide } from '@/context/calculator';

// 创建vue实例
const app = createApp({
    setup() {
        calculatorProvide();
        return () => h(App);
    }
});

// 挂载实例
app.mount('#app');

// src/views/parent.vue

import { defineComponent } from "vue";
import { calculatorProvide } from '@/context/calculator';

export default defineComponent({
  name: "parent",
  setup() {
    //共享数据
    calculatorProvide();
  }
});

// src/views/child.vue

import { defineComponent } from "vue";
import { calculatorInject } from '@/context/calculator';

export default defineComponent({
  name: "child",
  setup() {
    //注入数据
    const { count, increase, updateCount } = calculatorInject();
  }
});

// src/context/calculator.ts

type Calculator = {
    count: number;
    increase: () => void;
    updateCount: (num: number) => void;
};

//共享状态
const calculatorStore = reactive<Calculator>({
    count: 1,
    increase: () => {
        calculatorStore.count++;
    },
    updateCount: (num: number) => {
        calculatorStore.count = num;
    }
});

export { calculatorStore };

// src/views/any.vue

import { defineComponent } from "vue";
import { calculatorStore } from '@/context/calculator';

export default defineComponent({
  name: "any",
  setup() {
    console.log(calculatorStore.count);
  }
});