1

我正在制作游戏编辑器。它所需要的只是一种从公共存储中保存和读取数据的方法，例如精灵和工具设置。

问题是 Vuex 对我来说真的很乱。也许是因为我没有构建 Vuex 设计的标准 SPA，但似乎每次我想做一些简单的事情时，它都会在 getter、action 和 mutation 中添加 50 多行代码，否则这些代码是不必要的。最重要的是，它有一些限制，例如无法从 getter 修改状态，这在生成唯一资产 ID 时非常有用。我也不需要动态加载/卸载模块。

所以我的问题是，如果我用如下导入的对象替换 Vuex：

class MyStore_Class{
    constructor(){
        this.val = 0;
    }

    //other methods and stuff to manipulate data
}

let MyStore = new MyStore();

export default MyStore;

然后将此MyStore对象导入我需要它的组件中，我会丢失任何东西吗？

我进行了一些简单的测试，看起来它可以完美地替代 Vuex，但我担心可能会有一些缺点，我稍后才会注意到。

退出：应用程序的几乎所有数据都是本地的，因此动作/突变的分离往往意味着我正在编写的唯一动作代码是commit('doMutation', newData)一遍又一遍

4

1 回答 1

0

您的解决方案可能是可观察的 vue，在架构方面真的很容易做和轻量级；）

  1. 在 src/root 文件夹中创建一个 store.js 文件
  2. 创建您希望全局拥有的状态值
  3. 为他的互动创建你需要的方法
  4. 在您的组件中设置它，然后就可以了

设置 store.js

import Vue from "vue";
const state = Vue.observable({ val: 0 });
export const increment = () => state.counter++;
export const decrement = () => state.counter--;
export default state;

在您的组件中

<template>
  <div>
    <p>The value is {{val}}</p>
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </div>
</template>
<script>
  import store, { increment, decrement } from "./store";
  export default {
    computed: {
// your getter in some way
      counter() {
        return store.counter;
      }
    }, 
    methods: {
      inc() {
        increment();
      },
      dec() {
        decrement();
      }
    }
  };
</script>

我在本文中采用了这些示例，如果您愿意，您可以在其中阅读更多关于 vue observable 的信息，但我在小型项目中经常使用它，在这些项目中我只需要几个全局可访问的值，并且不需要 vuex 架构。

https://medium.com/better-programming/how-to-manage-vues-state-with-vue-observable-25988a88938b

于 2020-11-21T20:02:20.160 回答