在-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

觉得有用就点个赞吧～

感谢阅读

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