質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

692閲覧

vue.js Uncaught (in promise) Error: ERR_ACTION_ACCESS_UNDEFINEDエラー解決方法

whiwhdiw

総合スコア70

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2020/06/15 08:37

test.jsonの値をgroupEntitiesに保存したいのですが下記のエラーになってしまいます。

処理内容としてはgroupPageにアクセスした時に、created()の中のgroupStore.loadGroup()が呼ばれて、
その中のthis.addGroup(test)が呼ばれます。
addGroup()の中の
this.groupEntities = [...this.groupEntities, new GroupEntity(group)]でjsonのデータを保存しています。

// groupPage <template> <div class="center-column"> {{ groupStore.groupEntity.count }} {{ groupStore.groupEntity.type }} {{ groupStore.groupEntity.selections[0] }} </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' import { grouprStore } from '@/store/' @Component export default class GroupPage extends Vue { created() { groupStore.loadGroup() } } </script>
//store import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators' import { Group } from '../domain/test.ts'; import test from '@/assets/test.json' export class GroupEntity { type: string = '' count: number = 0 selections: Statuse[] = [] constructor(group: Group) { this.type = group.member.type this.count = group.count this.selections = this.addSelections(group.member.statuse.selection) } private addSelections(selections: Selections[]) { let select: any = [] selections.forEach((selection) => { select = selection }) return select } } export interface IGroupState { groupEntities: GroupEntity[] } @Module({ stateFactory: true, namespaced: true, name: 'groups' }) export default class Groups extends VuexModule implements IGroupState { groupEntities: GroupEntity = [] @Mutation addGroup(group: Group) { this.groupEntities = [...this.groupEntities, new GroupEntity(group)] @Action loadGroup() { this.addGroup(test) } }
//test.ts export class Group { count: number = 0 member = Member } export class Member { type: '' status = Statuse } export class Statuse { selection = Selection[] } export class Selection { id: number = 0 name: string = '' }
// test.jspn { "count": 3, "member": [ { "type": "groupA", "statuse": { "selection": [ { "id": 0, "name": "hello world" }, { "id": 1, "name": "hello world two" } ] } } ] }
// エラーメッセージ index.js?6fc5:353 Uncaught (in promise) Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action? That works only in dynamic modules. If not dynamic use this.context.commit("mutationName", payload) and this.context.getters["getterName"] Error: Could not perform action loadCareers at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:366:37) at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:135:23) at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:116:53) at eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:109:71) at new Promise (<anonymous>) at __awaiter (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:105:12) at Store.action (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:326:20) at Array.wrappedActionHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:755:23) at Store.dispatch (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:446:15) at Store.boundDispatch [as dispatch] (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:340:21) TypeError: Cannot read property 'selections' of undefined at new CareerEntity (webpack-internal:///./store/career.ts:57:73) at Object.addCareer (webpack-internal:///./store/career.ts:93:155) at Store.mutation (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:427:26) at wrappedMutationHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:748:13) at commitIterator (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:400:7) at Array.forEach (<anonymous>) at eval (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:399:11) at Store._withCommit (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:530:3) at Store.commit (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:398:8) at Store.boundCommit [as commit] (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:343:19) at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:360:35) at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:135:23) at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問