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

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

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

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

13593閲覧

vuex state値をmounted内で使いたい

holic

総合スコア134

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/11/13 19:12

編集2018/11/13 19:20

前提

「vuex state値をmounted内で使いたい」とタイトルをつけさせていただきましたが、
下記に紹介するソース・目的とするゴールが本当にvue.jsの規定に沿っているのか自体が不安と考えております、合わせてご意見をいただけましたら今後のわたくしの勉強にもなると思います、お手数ではございますがよろしくお願いいたします。

##ソース

####store/posts.js(vuexのソース)

js

1export const state = () => ({ 2 postsCategories: null 3}) 4 5export const getters = { 6 postsCategories: state => state.postsCategories 7} 8 9export const mutations = { 10 setPostsCategories(state, postsCategories) { 11 state.postsCategories = postsCategories 12 } 13 14} 15 16export const actions = { 17 async addPostsCategory({ commit }, payload) { 18 const newCat = {} 19 newCat[payload.slug] = payload 20 //console.log(newCat) 21 await this.$axios.$patch('/postscategory.json', newCat) 22 const postsCategories = await this.$axios.$get('/postscategory.json') 23 //const postsCategories = await this.$axios.$get('/postscategory/' + payload.id + '.json') 24 commit('setPostsCategories', postsCategories) 25 }, 26 async postsCategories({ commit }) { 27 const postsCategories = await this.$axios.$get('/postscategory.json') 28 commit('setPostsCategories', postsCategories) 29 }, 30 31}

####テンプレートファイルの記述

html

1<template> 2 <section class="container posts-page"> 3 <multiselect :selected="selected" :options="options" :multiple="true" @update="updateSelected" v-model="payload.categories" placeholder="カテゴリー選択"></multiselect > 4 5 <ul> 6 <li v-for="(cat,index) in postsCategories" :key="index">{{ cat.name }}</li> 7 </ul> 8 </section> 9</template> 10 11<script> 12import { mapGetters } from "vuex"; 13import Multiselect from "vue-multiselect"; 14export default { 15 components: { Multiselect }, 16 data() { 17 return { 18 selected: null, 19 options:[] 20 }; 21 }, 22 methods: { 23 updateSelected(newSelected) { 24 this.selected = newSelected; 25 } 26 }, 27 mounted() { 28 const cat = this.$store.state.posts.postsCategories; 29 console.log(cat); 30 for (var value in cat) { 31 this.options.push(value); 32 } 33 }, 34 created() { 35 this.$store.dispatch("posts/postsCategories"); 36 }, 37 computed: { 38 ...mapGetters("posts", ["postsCategories"]) 39 } 40}; 41</script>

出来ていること

  • 目的とするページに遷移をするとcreatedが作動、store/post.jsのpostsCategoriesという名のstateに格納しております。値はオブジェクトとして格納しております。
  • computedのmapGettersでpostsCategoriesを getter関数として取得し、htmlにレンダリング可能です。

#実現したいこと

  • multiselectという子コンポーネントにprops要素としてoptionsを設けております。渡す値をpostsCategoriesの"name"を基にした配列を入れたい。
  • postsCategoriesはオブジェクトであるので配列に変換しなければならない。
  • postsCategoriesの中身はこんな感じである  { "nuxt": { "name": "Nuxt.js", "slug": "nuxt" }, "laravel": { "name": "Laravel", "slug": "laravel" }, "wp": { "name": "wordPress", "slug": "wp" }}
  • mapGettersでgetterとして、postsCategoriesは取得しております、このpostsCategoriesをsetter関数として使うことはできるのか。

##試したこと
mountedにセットしようとしてみましたが、値はセットされませんでした。

mounted() { const cat = this.$store.state.posts.postsCategories; console.log(cat); for (var value in cat) { this.options.push(value); } },

上記の経験から、store.state値をどのようにsetterとして使えばよいのか、悩みだしました。
そもそもの考え方が違うのではないのかとも悩み始めております。

vue.js,vuexに詳しい方がいらっしゃいましたら、是非とも教えていただきたいです。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

created() にて postsCategories のリクエストを行っているわけですが、それは非同期処理なので、その結果が mounted() までに取得できているという保証がありません。そのため、

js

1 mounted() { 2 const cat = this.$store.state.posts.postsCategories; 3 console.log(cat); 4 for (var value in cat) { 5 this.options.push(value); 6 } 7 },

にてthis.$store.state.posts.postsCategoriesnullになっているのではないかと思われます。

ではどうやって postsCategories が取得できたタイミングで this.options をセットするかという話になりますが、せっかく Vue を使っているので computed を使って postsCategories から options を計算するようにすれば簡単に実現できます。

投稿2018/11/14 03:23

編集2018/11/14 03:31
karamarimo

総合スコア2551

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

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

holic

2018/11/14 04:50 編集

karamarimo様ご返答ありがとうございます。 >それは非同期処理なので、その結果が mounted() までに取得できているという保証がありません。 内容理解いたしました、computedにて書き直しました。 見事に解決できました。 computedの箇所のみ抜粋 ``` computed: { options() { let options = []; const cat = this.$store.state.posts.postsCategories; console.log(cat); for (var value in cat) { options.push(value); } return options; }, ...mapGetters("posts", ["postsCategories"]) } ``` より「vuex」「computed」の理解を深めたいので何点か質問をさせてください。 ・computedはdataにある値を監視し、変更があるとリファクタリング(発動)するというのを認識しておりました、この場合、「postsCategories」というstoreのstate値を監視し発動をしたことになります。storeのstate値に存在するものはdataに存在するのと同じであると考えてよろしいのでしょうか。 ・`const cat = this.$store.state.posts.postsCategories`を試しに、 ↓ `const cat = this.postsCategories` にしてみましたが、これも正常に動きました。vuexのstate値の取り出し方法は本来の規約としてはこちらのgettersを介す方法がただしいのでしょうか。(直接state値を取りに行くのは良くないのでしょうか)
karamarimo

2018/11/14 05:42 編集

> storeのstate値に存在するものはdataに存在するのと同じであると考えてよろしいのでしょうか。 どういう意味で同じということなのか分かりかねますが、Vuexのstoreは component の dataと同様に reactive であるという前提で扱えますが、直接代入などをしてはいけない(mutationを通じて行う必要がある)という点で異なります。 > vuexのstate値の取り出し方法は本来の規約としてはこちらのgettersを介す方法がただしいのでしょうか。(直接state値を取りに行くのは良くないのでしょうか) getterを介する必要はありませんが、毎回 this.$store.state.... と書くのではなく、computed property としてアクセスするのが推奨されているようです。 https://vuex.vuejs.org/guide/state.html これも、getter などと同様に mapState というヘルパー関数でコンパクトに書けます(上のリンクに使い方が書かれています)。
holic

2018/11/14 10:43

追記質問のご返答もありがとうございます、 理解が深まりました。 大変感謝いたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問