vuex并不能让跨组件变得更简单和方便,反而会让他变复杂。
官网都说,如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。
很多应用都用不到Vuex,如无必要,勿增实体。
至于跨组件方案,你其实有一大堆方法可以用,我可以列举几个,并说明利弊:
Vue实例:
你可以声明一个Vue实例,命名为store,然后利用其data和methods管理数据。
export const store = new Vue({
data: { count: 0 },
methods: {
add() {
this.count++;
}
}
});
然后在需要的组件内,通过computed获取数据,直接调用methods更新数据:
import { store } from "../App";
export default {
computed: {
count() {
return store.count;
}
},
methods:{
add(){store.add()}
}
}
Vue event bus:
const $eb = new Vue()
$eb.$emit('change')
$eb.$on('change',//...)
LocalStorage & Cookie & indexedDB:
Provider/Inject:
export default {
provide() {
return {
reactive: this.reactive
};
},
data() {
return {
reactive: {
value: "Hello there"
}
};
}
};
利弊分析如下:
- 所有上述方案的调试支持都不强,功能复杂之后测试调试困难。
- 所有上述方案横向扩展能力都很差。
- eventbus需要取消订阅,频繁调用容易内存泄漏。
- LocalStorage Cookie需要频繁地序列化反序列化。
- indexedDB注册繁琐,用户不一定开放,操作繁琐。
- Provider/Inject响应式需要组件提供,其他编译条件下可能获取不到this。
由此可知,什么情况下,Vuex才是必须的?
- 需要对共享数据和行为进行拆分;
- 复杂的异步逻辑,需要综合多个模块进行状态演进,有详细的调试信息;
- 需要用到第三方插件;
- 由于由全局唯一数据源,方便进行跨平台,SSR中类似NUXT采用Vuex进行前后端数据同步。
- 需要综合考虑多个组件生命周期,先后顺序,实现特定逻辑。
因此,如果是音视频播放器,剪辑工具,文字编辑工具,代码编辑工具,大型ERP系统等等,有这方面需求,用是Vuex没有问题的。
如果只是个CRUD系统,搜索,表格,表单提交,切换几个路由?
你只能跟他们说,随意吧,不嫌累的话。
当然,需不需要用和你会不会是两件事,不代表不需要用你就可以不用会了。