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