cc
cc copied to clipboard
57.在 Vue 中使用全局共享的方式管理状态
在 Vue 中使用全局共享的方式管理状态
Vuex 是个非常好用的状态管理方案,但有时项目并不大,不需要很多的 action
和 mutation
,但是确实需要在各个组件之间共享一些数据和状态,所以就写了一个小巧的状态共享库:vue-stores
链接
GitHub: vue-stores
Demo: vue-stores-demo
NPM: vue-stores
说明
vue-stores 的特点就是小巧,一共才 50 多行的代码,但缺点就是不能像 vuex 那样在 dev-tools 中进行 time-travel
原理
把根组件中需要全局共享的状态、方法取出来,添加成为子组件中的计算属性,并通过 get
set
来劫持数据的变化,保证在子组件中修改和获取的值都来自于根组件 Root
。
用法
直接把 demo 中的代码搬过来
根组件定义共享数据
import stores from 'vue-stores'
Vue.use(stores)
new Vue({
...
data: {
state: {
showModal: false,
global: {
txt: 'shared Text'
}
}
},
methods: {
toast(){
alert('this is a shared method')
}
}
})
state 是一个自定义的属性,data.state
里的对象就是可以在各个组件中共享的状态数据
子组件使用共享数据
在组件 app
中使用共享数据,可以使用别名,如 modal
和 alert
stores: {
txt: 'state.global.txt',
modal: 'state.showModal',
alert(){
return 'toast'
}
}
这里也是用了自定义的属性 stores
, 其中的 txt
modal
alert
都会转为该组件的计算属性
同理,在其他子组件中也是相同的方式来引用共享数据,具体还是看源码好了
其中的 Modal 组件中的 show
属性值不仅可以在组件内部通过 close 按钮改变,也可以在外部 app 组件中通过 toggle
方法改变,但他们的状态是用永远同步,因为都是指向了根组件的 state.showModal
在组件 app 中定义的别名方法 alert
其实指向的是跟组件中的 toast
方法,调用 alert 就是调用 toast
最后
vue-stores
只是一个状态管理的另一个思路,也是根据业务驱动并参考了社区的其他方案得出了的种状态管理方式,适合于小项目中的状态共享方案,对于长期的大项目,还是建议用 Vuex,毕竟全家桶,毕竟亲儿子....