在任何 javascript 应用程序中是否有像 vuex 或 redux 一样工作的库？

Question

我没有足够的知识来给出技术解释，所以我会说明问题。

我有一个简单的程序，在节点上，从“main.js”文件开始。我想要的是以有组织的方式在全局范围内操作内存中的数据。我的程序太简单了，无法使用数据库，但是创建函数只是为了在 JSON 中执行 CRUD 并不是很有趣。所以我想到了Vuex。

下面的代码是文档中的示例。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // mutate state
      state.count++
    }
  }
})

我希望至少能够创建状态、getter 和提交变更。

Answer 1

很容易编写一些代码来近似 vue 商店 class 正在做什么。它似乎需要一个带有一些初始 state 和可选的 getters and/or mutation 方法的构造函数，这些方法作用于该状态。

这是一个相当简陋的实现，它隐藏了状态以阻止它被外部更改。

class MyStore
{
  constructor(info) {
    const state = info.state;
        
    info.getters && Object.entries(info.getters).forEach( ([method, impl]) => {
      this[method] = () => impl(state)
    });
    
    info.mutations && Object.entries(info.mutations).forEach( ([method, impl]) => {
      this[method] = () => impl(state);
    });
    
  }
}

你可以看到这与你下面的两个例子一起工作（注意我让 state 无法直接访问所以不得不在第二个例子中添加一个 getter 来读取当前的 count 状态):

class MyStore
{
  constructor(info) {
    const state = info.state;
        
    info.getters && Object.entries(info.getters).forEach( ([method, impl]) => {
      this[method] = () => impl(state)
    });
    
    info.mutations && Object.entries(info.mutations).forEach( ([method, impl]) => {
      this[method] = () => impl(state);
    });
    
  }
}


const store1 = new MyStore({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})


console.log(store1.doneTodos())

const store2 = new MyStore({
  state: {
    count: 1
  },
  getters: {
    currentCount: state => state.count
  },
  mutations: {
    increment (state) {
      // mutate state
      state.count++
    }
  }
})

store2.increment();
console.log(store2.currentCount());

Answer 2

Redux 与框架无关，因此您可以直接使用 Redux（或更好的 Redux Toolkit）JavaScript。

在任何 javascript 应用程序中是否有像 vuex 或 redux 一样工作的库？

Is there any library that works like vuex or redux in any javascript application?

javascript

database

redux

vuex