在 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.setUser({
        name: '恩佐'
      })
    }
  }
</script>
    

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

---

THE END

感谢阅读

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