vue：简单方法替代vuex或者bus

Posted 2020-10-06 吃个石头

兄弟组件，隔代组件传值很麻烦，方法虽然多，但都各有缺点。

vuex: 适合数据量大，并且函数集中处理。

bus：适合数据虽少，却不得不用的时候，维护困难。

root：这儿指将值挂在root组件上，需要的组件都到root上去取。

有时候数据量不多，觉得引入vuex又使得项目变得沉重，使用全局bus又显得不好维护，使用跟组件更是感觉跟理念不符合。

store：这就是介绍的简单方法。详细如下

需了解： 1、import 引入文件是引用的地址，并不是将数据复制一份，就是说该变了数据后，原文件的数据会发生变化。可以利用这个特性来传递数据。

　　　　2、data里挂载的数据是动态绑定的。

 

1 // store.js
2 export default {
3     a: 1,
4     b(val) {
5         console.log(val)
6     }
7 }

 

// 需要使用公用数据的 组件

import store from ‘./store.js‘
export default {
  data() {
    return { store }
  },
}

store里的方法可以当methods里面的方法使用。任何组件改变了store里的值，所有组件store里的值都会发生改变。