web-dev-qa-db-ja.com

Vue / Vuex不明なアクションタイプ

Vuexをアプリケーションに実装し始め、ストアをモジュールに分割することにしました。

最初は、Vuexモジュールの動作をテストするためのモジュールを1つだけ作成しました。これは、これまでの経験がなかったためです。

モジュールフォルダーを作成し、その中にCompanyというモジュール用のフォルダーが1つあります。会社フォルダー内に次のファイルを作成しました：action.js、getters.js、index.js、mutations.js。

これらのファイル内のコード：

action.js：

import api from '@/vuex/utils/api'

const getCompanies = (context) => {
    api.get('/57/companies').then(response => {
        context.commit('GET_COMPANIES', response)
    }).catch((error) => {
        console.log(error)
    })
}

export default {
    getCompanies
}

注：api内では、基本操作（get、post、deleteなど）のメソッドを作成しました。 。）

getters.js：

const allCompanies = state => state.companies

export default {
    allCompanies
}

mutations.js：

const GET_COMPANIES = (state, companies) => {
    state.companies = companies
}

export default {
  GET_COMPANIES
}

index.js：

import actions from './action'
import getters from './getters'
import mutations from './mutations'

const state = {
  companies: []
}

export default {
  namespaced: true,
  state,
  actions,
  getters,
  mutations
}

このモジュールを作成した後、次のようにストアに追加しました。

store.js：

import Vue from 'vue'
import Vuex from 'vuex'
import companyModule from './modules/company'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    company: companyModule
  }
})

export default store

注vue appはこのストアを内部で使用するように指示しましたmain.jsファイル

これをテストするために、単純なhtmlテーブル内にデータをロードしようとする単純なHelloWorldコンポーネントを作成しました。ここで問題が現れました。 mountedフック内で、getCompaniesというアクションをディスパッチしました。私のテーブル内のデータを見ると、そこにありますが、開発コンソール内でエラーが発生しています：

vuex.esm.js？358c：417 [vuex]不明なアクションタイプ：getCompanies

HelloWorldコンポーネントのコード：

import { mapGetters } from 'vuex'

...

computed: {
    ...mapGetters({
        companies: 'company/allCompanies'
     })
}

...

mounted () {
    this.$store.dispatch('company/getCompanies')
}

...

データは私のストアにあります。スクリーンショットをチェックしてくださいvue devtools： vuedevtools

だから私の質問は、なぜコンソール内でこのエラーが発生するのか、何かが欠けているのか、そのエラーでどのように機能するのかということです。ありがとう！

javascriptvue.jsvuex
7
Aleksandar Milicevic

これを試して：

import { mapGetters,  mapActions} from 'vuex'

computed: {
    ...mapGetters({
        companies: 'company/allCompanies'
     })
}

methods: {
  ...mapActions(['company/getCompanies'])
},

mounted() {
  this['company/getCompanies']();
},

しかし、私は以下のようにネームスペースを行うのが好きですが、問題があります。問題を参照してください here 。

methods: {
  ...mapActions('company', ['getCompanies'])
},

mounted() {
  this.getCompanies();
},
5
Syed

Store.js内でモジュールを使用する場合は、使用することに注意してください

export const namespaced = true

および[〜＃〜] not [〜＃〜]

export const namespaces = true

modules/foo.jsファイル内。いタイプミス！

2
Marcel Zebrowski

あなたはそれを修正することができます

this.$store.dispatch('company/getCompanies', null, {root:true})

コンポーネントでmapActionsメソッドも使用します

1
AliDenizAltun