使用 Vue.observable 创建一个带有属性 getter 的迷你商店答案

【问题标题】：Creating a mini store with property getters used Vue.observable使用 Vue.observable 创建一个带有属性 getter 的迷你商店
【发布时间】：2021-04-13 03:03:46
【问题描述】：

我目前将 createStore 函数导入到 store.js 文件中。在文件中，我传递了一个具有状态属性和突变函数的对象作为参数。这很好用。

createStore.js

import Vue from 'vue'
 
function createStore({ state, mutations }) {
  return {
    state: Vue.observable(state),
    commit(key, ...args) {
      mutations[key](state, ...args)
    }
  }
}
 
export default createStore

store.js

import create from './createStore.js'

const store = create ({
    state: {
      counter: 0
    },
    mutations: {
      increment(state, payload){
        state.counter += payload
      }
    }
})

export default store

我现在要做的是 createStore 函数来接收 getters 属性并执行我在组件中调用的函数。示例：

CompExample.vue

computed: {
  counter() {
    return store.getters.counter
  }
}

谢谢

【问题讨论】：

标签： javascript vue.js vuejs2 vuejs3

【解决方案1】：

从给定的getters 地图创建您的商店吸气剂（类似于 Vuex 的吸气剂）：

声明一个新对象来存储我们的新 getter（命名为 myGetters）。
在getters 上使用Object.entries() 来获取其键和值。
在每个键/值对上，使用myGetters 上的Object.defineProperty() 定义一个getter，该getter 以state 作为参数调用值（如果它是一个函数）。

function createStore({ state, mutations, getters }) {
  1️⃣
  const myGetters = {}

  if (getters) {
    2️⃣
    Object.entries(getters).forEach(([key, value]) => {
      3️⃣
      Object.defineProperty(myGetters, key, {
        get: () => typeof value === 'function' ? value(state) : value
      })
    })
  }

  return {
    //...
    getters: myGetters
  }
}

然后像这样在store.js中初始化它：

const store = createStore({
  //...
  getters: {
    counter: state => state.counter,
    half: state => state.counter / 2,
    double: state => state.counter * 2,
    square: state => Math.pow(state.counter, 2)
  }
})

demo

【讨论】：