小项目还用Vuex?用Vue.observable手写一个状态管理吧

在前端项目中，有许多数据需要在各个组件之间进行传递共享，这时候就需要有一个状态管理工具，一般情况下，我们都会使用Vuex，但对于小型项目来说，就像Vuex官网所说：“如果您不打算开发大型单页应用，使用Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex”。这时候我们就可以使用Vue2.6提供的新APIVue.observable手动打造一个Vuex

1. 创建store

import Vue from 'vue'
// 通过Vue.observable创建一个可响应的对象
export const store = Vue.observable({
    
    
  userInfo: {
    
    },
  roleIds: []
})
// 定义 mutations, 修改属性
export const mutations = {
    
    
   setUserInfo(userInfo) {
    
    
     store.userInfo = userInfo
   },
   setRoleIds(roleIds) {
    
    
     store.roleIds = roleIds
   }
}

2. 在组件中引用

<template>
   <div>
     {
    
    {
    
     userInfo.name }}
   </div>
</template>
<script>
  import {
    
     store, mutations } from '../store'
  export default {
    
    
    computed: {
    
    
      userInfo() {
    
    
        return store.userInfo 
      }
   },
   created() {
    
    
     mutations.setUserInfo({
    
    
       name: '子君'
     })
   }
}
</script>

本文转载，原文来源于：https://zhuanlan.zhihu.com/p/163400731