Question

假设我有类似下面的JavaScript对象类：

class Car {
  var engineTurnedOn = false;
  ...

  public turnEngineOn() {
     engineTurnedOn = true
  }
}

现在我想打开引擎。我是否应该创建一个名为turnEngineOn的动作来触发变异，这将触发方法'turnEngineOn'或直接在对象上调用此方法？在第二种情况下，商店只负责管理一系列汽车，而不是操纵汽车。

案例1：

//actions
turnEngineOn = ({commit}, car) => {
   dispatch('turnEngineOn', car);
}

//mutation
turnEngineOn = (state, car) => {
  car.turnEngineOn()
}

案例2： car.turnEngineOn() //外部行动

或者我可能不需要JavaScript对象？

此致

Answer 1

turnEngineOn方法是一种组件方法，所以它不应该在vuex中至少执行变异。 Vuex操作用于http请求之类的异步调用。在异步调用和突变突变正确的状态后，动作可以提交突变。

我认为你正在使用Typscript这就是为什么你使用javascript类语法？如果不是，我建议使用Typescript或不使用类语法。

突变应该是改变你的vuex状态的唯一方法，你是否可以直接从组件提交变异来改变状态，或者你可以派遣一个动作来提交变异。我只使用组件中的调度而不使用提交状态更改，但这只是我从社区看到的意见，有些人从组件提交。所以你的代码应该是这样的：

// Car Component...

class Car {
    // var isEngineOn = true, you don't need this in here if you want to use vuex state
    // You need Vue's computed property to reach an element in the vuex store
    get isEngineOn () {
        return this.$store.getters.isEngineOn
    }
    .
    .
    .
    public toggleEngine () {
        this.$store.dispatch('toggleEngine') // You don't need payload in this one
        // You can commit directly like 'this.$store.commit('toggleEngine') if you don't need an action here
    }
}

现在，您可以将方法绑定到按钮或任何您喜欢的方式来切换汽车引擎。

// You need to define the engine variable in your vuex state...
const state = {
...
    isEngineOn: true,
...
}

// Vuex actions...
toggleEngine ({ commit, state }) {
    commit('toggleEngine')
}

// Vuex mutations...
toggleEngine (state) {
    state.isEngineOn = !state.isEngineOn // makes the variable true if false and vice versa
}

// Vuex getters...
isEngineOn (state) {
    return state.isEngineOn
}

现在，您可以从组件中更改状态，并在模板中使用状态变量和计算属性。

查看文档以获取更多详细信息，在了解此逻辑后，此图表开始有意义：P。 https://github.com/vuejs/vuex

存储JavaScript对象并在Vuex中改变它 - 概念

1 个答案: