Question

我定义了一个包含两个模块的商店，我正试图访问一个模块操作，我试图做

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = Bundle.main.loadNibNamed("ScheduleTableViewCell", owner: self, options: nil)?.first as! ScheduleTableViewCell
    cell.classLabelView.text = "\(classes[indexPath.row].name)"
    cell.classPeriodLabel.text = "\(classes[indexPath.row].period)"
    cell.roomLabel.text = "\(classes[indexPath.row].room)"
    cell.isUserInteractionEnabled = true
    cell.selectionStyle = .none
    return cell
}

但我明白了：

[vuex]未知动作类型：加载

我尝试了另一个选项，我在谷歌找到的东西，但没有任何效果，访问模块操作的正确方法是什么？

这是我的代码：

Vuex定义：

this.$store.dispatch('load');

options.js

let session = require('./store/session.js');
let options = require('./store/options.js');
const store = new Vuex.Store({
    modules: {
        session: session,
        options: options,
    },
});

和我的应用组件：

 export default {
    state: {
        data: null,
    }, 
    mutations: {
        setOptions (state, payload) {
            console.log(payload);
        } 
    },
    actions: { 
        load( { commit }) {
            $.getJSON('options')
            .then(function (data) {
                commit('setOptions', data);
            });
        }
    },
    getters: {

    }

}

我的vue build：

export default {
    beforeCreate() {
         this.$store.dispatch('load');
    }
}

Answer 1

我会考虑使用 vuex 的 mapActions 助手。相关文档可以在 https://vuex.vuejs.org/guide/actions.html#dispatching-actions-in-components .

找到

此页面的示例如下：

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // map `this.increment()` to `this.$store.dispatch('increment')`

      // `mapActions` also supports payloads:
      'incrementBy' // map `this.incrementBy(amount)` to `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // map `this.add()` to `this.$store.dispatch('increment')`
    })
  }
}

Answer 2

我解决了这个问题而不是做

 let options = require('./store/options.js');

我做了：

import options from './store/options.js'

现在可行了

如何从组件访问Vuex模块操作

2 个答案: