如何共享状态

  • 可以直接在一个JS文件内定义响应式变量，各组件分别引用，这样最简单，但是不支持SSR
  • 使用provide/ inject插件的方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//user.js
//首先需要实现数据处理逻辑
const userStore = () => {
//这里可以使用vue3 的响应式
const userInfo = ref("")
const getUser = () => {
//	通过接口获取到user的信息
userInfo.value = userInfo_by_api;
}
// ... 一些其他的方法
return {
//返回需要用到的属性
  getUser(),
  userInfo,
  ....
}
}

//接下来需要把方法以注入的形式暴露出来给需要的地方调用。
//需要给provide一个唯一的名称以免后面调用的时候冲突。
const user = Symbol() //这里使用Symbol 新的一个数据类型，保证变量名唯一
const useUser = () => inject(user) //这里使用inject调用 provide注入的userStore的方法。
//把方法都export出去
export {
  user,
  userStore
}
export default useUser

//以插件的形式把所有的store都集合起来，然后provide注入。
//index.js
import {user, userStore} from "path/to/user.js"
const store = {
  install: (app: App) => {
    app.provide(user, userStore());
  }
};
export default store;

//然后在main.js 中use
//main.js
import store from "path/to/index.js"
......
createApp(App).use(store)

//最后就可以在需要使用的地方使用了
//other_need_use.js
import useUser from "path/to/user.js"
const user = useUser()
//可以通过user.xxx 访问user.js中的属性了。
//user.getUser() 等等。

以下是vueconf中分享的方法，原理跟上面是一样的
vue3