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:
だから私の質問は、なぜコンソール内でこのエラーが発生するのか、何かが欠けているのか、そのエラーでどのように機能するのかということです。ありがとう!
これを試して:
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();
},
Store.js内でモジュールを使用する場合は、使用することに注意してください
export const namespaced = true
および[〜#〜] not [〜#〜]
export const namespaces = true
modules/foo.jsファイル内。いタイプミス!
あなたはそれを修正することができます
this.$store.dispatch('company/getCompanies', null, {root:true})
コンポーネントでmapActions
メソッドも使用します