怎么实现一个简单的vuex-创新互联

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
 // ...
})

var app = new Vue({
 el: '#app',
 bus: bus
})

// 使用 bus
app.$options.bus

// or
this.$root.$options.bus

var bus = new Vue({
 data: {
  count: 0
 }
})

非父子组件的实现

然后是两个非父子组件和 app 的实现，子组件都使用到了 bus 的 count，这里用 store.state 表示，跟 vuex 一致：

// 待实现
const store = new Store(Vue, {
 state: {
  count: 0
 }
})

// 子组件 a
const childA = {
 template: 'click me',
 methods: {
  handleClick () {
   this.$store.state.count += 1
  }
 }
}

// 子组件 b
const childB = {
 template: '
count: {{ count }}
',
 computed: {
  count () {
   return this.$store.state.count
  }
 }
}

new Vue({
 el: '#app',
 components: {
  'child-a': childA,
  'child-b': childB
 },
 store: store
})

看到代码里还有一个 Store 待实现。所需要的参数，因为这里懒得用 Vue.use() ，所以直接将 Vue 作为参数传入以供使用，然后第二个参数跟我们使用 vuex 传入的参数一致。

Store 的实现

接下来就是 Store 的实现，两步实现：

1. 创建一个 bus 实例；

2. 让子组件都能访问到 this.$store。

第 1 步骤上面已经有了，第 2 步骤主要用到了 Vue.mixin 来全局混入，但仅仅只是找到有 store 的根实例并赋值 Vue 原型上的 store，也能够让根实例 app 不用专门写 mixins 混入。

class Store {
 constructor (Vue, options) {
  var bus = new Vue({
   data: {
    state: options.state
   }
  })

  this.install(Vue, bus)
 }
 
 install (Vue, bus) {
  Vue.mixin({
   beforeCreate () {
    if (this.$options.store) {
     Vue.prototype.$store = bus
    }
   }
  })
 }
}

实现的 Store 就是一个简单的 "vuex"，它拥有了 vuex 的 state，足够让非父子组件之间进行简单通信。

在 Store 的构造函数里创建一个 bus 实例，并将其注入 Vue 的原型，实现了组件都能访问到 this.$store 即 bus 实例。 this.$store 就是一个 Vue 实例，所以访问了 this.$store.state.count 实际上就是访问到了 data，从而实现了非父子组件之间的响应同步。全部源码参考这里 。

以上是“怎么实现一个简单的vuex”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。