模仿vuex写了一个简单的状态管理的插件,这样写对吗?

自然框架
  • 7

题目描述

感觉vuex有点臃肿,想自己写一个轻量级的,尝试了一下,可以运行起来,也达到了预期效果,只是感觉有点别扭,不知道这么写对不对。

题目来源及自己的思路

发挥composition API的优势,避免字符串,简化操作。
另外想学习一下怎么做vue的插件。

相关代码

// 模仿Vuex写一个简单的数据、状态、缓存管理

import { install } from "element-plus"
import { reactive, inject } from 'vue'

// VuexDataState
export default {
  store: {
    state: {},
    action: {}
  }, // 状态容器

  // 创建实例
  createVueDataState(info) {
    const _info = {
      global: {
        blogState: {
          aaa: '状态演示'
        }      
      },
      action: {
        setBlogState(state, value) {
          state.blogState.aaa = value
        } 
      }
    }

    this.store.state.blogState = reactive(_info.global.blogState)
    this.store.action.setBlogState = _info.action.setBlogState

    return this
  },

  // 代码里面调用
  useStore() {
    const state = inject('nf-store').state

    const fun = {}
    fun.setBlogState = (aa) => {
      return this.store.action.setBlogState(state, aa)
    }

    fun.setBlogState2 = (aa) => {
      return this.store.action.setBlogState(state, aa)
    }

    console.log('useStore内部的fun:', fun)
    return {
      ...fun
    }

  },

  // 安装插件
  install (app, options) {
    // Plugin code goes here
    console.log('vueds-app', app)
    console.log('vueds-options', options)
    console.log('我的状态', this.store)
    // 注入状态
    app.provide('nf-store', this.store)
    // 模板使用状态
    app.config.globalProperties.$nfstate   = this.store.state

  }
}

你期待的结果是什么?实际看到的错误信息又是什么?

基本就是这样,但是总是感觉怪怪的。

所以想问问各位高手,这么写对不对?

当然功能很简陋,现在只是测试一下想法是否可以实现。

回复
阅读 91
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏