手写一个小小的Vuex

Vuex是专门为Vue.js应用开发的一种状态管理模式。在Vue项目中，有些数据需要在很多组件中传输。为了方便管理和维护，我们需要这样一个工具来管理这些数据，通常我们会选择Vuex。但是正如Vuex官网所说：Vuex可以帮助我们管理共享状态，并且自带了更多的概念和框架。这需要在短期利益和长期利益之间进行权衡。如果您不打算开发大型单页应用程序，使用Vuex可能会很乏味且多余。这是真的——如果你的应用足够简单，你最好不要使用Vuex。但是当我需要这样一个工具又不想变得多余和累赘的时候怎么办呢？这时候，我们可以使用Vue(v2.6+)中提供的Vue.observableAPI，手写一个微型的Vuex。CreatestoreimportVuefrom'vue'//使用Vue.observable创建一个响应对象exportconststore=Vue.observable({user:{},power:[]})//创建改变数据的mutationsexportconstmutations={setUser(user){store.user=user},setPower(power){store.power=power}}使用<组件中的脚本>import{store,mutations}from'../store'exportdefault{computed:{user(){returnstore.user}},created(){mutations.setUser({name:'Enzo'})}}这样我们就有了一个微型的状态管理工具，通过加强上面的基础也可以用来处理比较复杂的逻辑。另外，大家也可以看看Vue官网写的store模式。THEEND觉得有用的话请点个赞～感谢阅读公众号是第一平台，关注不迷路，找机构一起进步