57.在 Vue 中使用全局共享的方式管理状态

[ccforward]

在 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 都会转为该组件的计算属性

同理，在其他子组件中也是相同的方式来引用共享数据，具体还是看源码好了

Top

Bottom

Modal

Bottom的子组件Other

其中的 Modal 组件中的 show 属性值不仅可以在组件内部通过 close 按钮改变，也可以在外部 app 组件中通过 toggle 方法改变，但他们的状态是用永远同步，因为都是指向了根组件的 state.showModal

在组件 app 中定义的别名方法 alert 其实指向的是跟组件中的 toast 方法，调用 alert 就是调用 toast

最后

vue-stores 只是一个状态管理的另一个思路，也是根据业务驱动并参考了社区的其他方案得出了的种状态管理方式，适合于小项目中的状态共享方案，对于长期的大项目，还是建议用 Vuex，毕竟全家桶，毕竟亲儿子....