在-Vue-中手写一个微型-Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，在vue项目中，有些数据需要在很多组件内进行传递，为了方便管理和维护，我们就需要这样一个工具来管理这些数据，通常情况下我们就会选择Vuex。

但是正如Vuex官网所说：

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。

但是当我需要这样一个工具又不想变得冗余繁琐怎么办呢，这时我们可以使用Vue(v2.6+)中提供的 Vue.observable API手写一个微型的Vuex。

创建 store

import Vue from 'vue'// 使用 Vue.observable 创建一个响应对象export const store = Vue.observable({  user: {},  power: []})// 创建 mutations 来改变数据export const mutations = {  setUser(user) {    store.user = user  },  setPower(power) {    store.power = power  }}    

在组件中使用

<template>  <span>    {{ user.name }}  </span></template><script>  import { store, mutations } from '../store'  export default {    computed: {      user() {        return store.user      }    },    created() {        mutations.user({        name: '恩佐'      })    }  }</script>    

这样我们就有了一个微型的状态管理工具，在上面基础上加强也可以用来应对相对复杂的逻辑，另外也可以看一下Vue官网所写的store模式。

THE END

觉得有用就点个赞吧～

感谢阅读

公众号为首发平台，关注不迷路，找到组织一起进步