在vue3中的组件有哪些方式可以得到store实例,原理是如何实现的?
createStore/useStore这两个方法是干什么的,如何实现的?
state的响应式是如何实现的?
getters在定义时是一个函数为什么在使用时以一个变量的形式就可以得到返回值?
import {inject,reactive} from "vue"
class Store{
constructor(options){
this.state=reactive(options.state);
let getters=options.getters;
this.getters={};
Object.keys(getters).forEach((item)=>{
Object.defineProperty(this.getters,item,{
get:()=>{
return getters[item](this.state);
}
})
})
//mutations
let mutations=options.mutations;
this.mutations={};
Object.keys(mutations).forEach(item=>{
this.mutations[item]=(data)=>{
mutations[item](this.state,data)
}
})
}
commit(key,value){
this.mutations[key](value)
}
install(app){
app.config.globalProperties.$store=this;
app.provide('store',this)
}
}
export function createStore(options){
///创建一个仓库
return new Store(options)
}
export function useStore(){
//让每个使用的组件得到一个store 仓库
return inject("store")
}