前言

Vue3公开了底层的响应式系统(reactive、ref)，并引入了构建应用程序的新方法。新的响应式系统功能强大，可用于共享状态管理。

上代码

1.创建 app.ts 入口文件

首先你需要创建一个入口文件负责存储 state 和修改state 的 mutations 然后使用 export 抛出给外部使用

Javascript

import { reactive } from 'vue';

interface appType {
  userName: string;
  id: number | null;
  userImg: string;
  [key: string]: any;
}

//  也可以ref 相当于 state
export const data = reactive<appType>({
  userName: '',
  id: null,
  userImg: '',
});


//  导出函数修改data,相当于 mutations
export function setDatas(key: string, value: any): void {
  data[key] = value;
}

基础使用方法

html

<template>
  <el-avatar :src="img"></el-avatar>
</template>

<script lang="ts" setup>
 import { data, setDatas } from '@/hooks/app';
//   获取到img
 let img = computed(() => {
    return data.userImg || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
  });
//  用于修改state 数据
 const update = () => {
    setDatas('userName', '小明');
    setDatas('userImg', 'https://img.mgblog.cn/ee69f34f5e4545b92d8fff0b25d944a8.jpg');
    setDatas('id', 123);
  };
</script>

这样基本上完成一个拥有state、mutations的小型Vuex 了

2.实现 getter、actions

你会发现，如果每次引用时，都要处理state太麻烦了，所以在app.ts入口文件实现getter 处理数据吧

Javascript

import { computed } from 'vue';

/* 此处省略上述代码 */

const img = computed(() => {
  return data.userImg || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
});

export const getters = {
  img
};

// actions 基本就是在这里写个方法调用 setData 而已没什么好说的
const imgAjax = () =>{
  $axios.post(url).then(res=>{
    // 此处调用mutations 方法
    setDatas('userImg',res.data)
  })
}

export const actions = {
  imgAjax
};

3.私密性

上面的方案有一个缺点：你不知道谁做的状态更改，因为状态可以直接更改，不受任何限制。
可以通过readonly函数包装状态，使其成为受保护的状态，需要修改状态时通过单独的函数来处理。

Javascript

1
2
3

import { readonly } from 'vue';

export const datas = readonly(data);

完整代码

Javascript

// 公共状态文件：替代VUEX
import { reactive, readonly, computed } from 'vue';
// https://juejin.cn/post/6856718746694713352
interface appType {
  userName: string;
  id: number | null;
  userImg: string;
  [key: string]: any;
}

//  也可以ref 相当于 state
const data = reactive<appType>({
  userName: '',
  id: null,
  userImg: '',
});

//  导出函数修改data,相当于 mutations
export function setDatas(key: string, value: any): void {
  data[key] = value;
}
export function setDataAll(value: appType): void {
  data.userName = value.userName;
  data.id = value.id;
  data.userImg = value.userImg;
}

// actions 基本就是在这里写个方法调用 setData 而已没什么好说的
const imgAjax = () =>{
  $axios.post(url).then(res=>{
    // 此处调用mutations 方法
    setDatas('userImg',res.data)
  })
}

export const actions = {
  imgAjax
};
// getters
const img = computed(() => {
  return data.userImg || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
});
export const getters = {
  img,
};

// readonly 可以保护data，外部代码只能访问状态，只有导出的函数才可以修改状态。
//  这里有点像 react useState
export const datas = readonly(data);