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

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

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

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

Vuex

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

JavaScript

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

TypeScript

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

意見交換

クローズ

3回答

593閲覧

Vuexなどの状態管理(グローバルなステート)の利点について

rykss

総合スコア100

Vue.js

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

Vuex

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

JavaScript

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

TypeScript

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

0グッド

0クリップ

投稿2023/02/18 07:25

編集2023/03/18 18:01

0

0

フロントエンド開発に関して初心者のため拙い部分があるのはご了承下さい

Vueにおける一元状態管理の利点について

Vueを利用して中規模なアプリを作成しているのですが、vuexにあるようなstateを使ったグローバルな変数管理が変数別モジュール定義した場合との違いがイマイチわからず、現状利点が見えません。

背景、状況

開発初期にvueでのグローバル変数定義にはvuexなどのいくつかの手法がありことを知り、vuexではなくとりあえず以下のようなprovide,injectを利用した簡単な状態管理を利用していました。

参考URL:Vue.jsで状態管理する方法!(グローバルなストアを作成)

しかしふと「別ファイルに定義すればstateなんていちいち定義しなくても使えるのでは?」と思い、別ファイルに使用するグローバル変数のgetter,setterや関数もろもろを定義し都度インポートする形にしてみたところ(API呼び出し関数が定義されたファイルから必要な物インポートするなど)、ダイナミックインポートが可能であることやprovide,injectよりも関数ごとに参照元が探しやすい・定義しやすいなど利点が大幅に上回りました。
ですが、Vuexなどの一元状態管理ライブラリがあることや参考URLのような状態管理の実装方法がいくつも存在するため「なにか利点を見いだせていないのでは?」と不安になっています

上記の点についてみなさんのvueに状態管理の利点についての意見をお伺いしたいと思っています。
よろしくお願いします。

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

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

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

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

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

回答3

#1

maisumakun

総合スコア145121

投稿2023/02/18 07:42

別ファイルに使用するグローバル変数のgetter,setterや関数もろもろを定義し都度インポートする形にしてみたところ(API呼び出し関数が定義されたファイルから必要な物インポートするなど)、ダイナミックインポートが可能であることやprovide,injectよりも関数ごとに参照元が探しやすい・定義しやすいなど利点が大幅に上回りました。

きちんと動作していますか?

Vue.jsの枠外で変数を変更した場合、「変更したけれどもそれをVue.js側で検知できず、再描画が行われない」などの不具合発生が予想されます。

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

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

#2

rykss

総合スコア100

投稿2023/02/18 08:50

編集2023/02/18 08:51

#1
maisumakunさん回答ありがとうございます
自分もそう思ったのですが、今も確認したところ、別ファイルにてRef型で定義したデータに関しても検知しているようです
APIで取得したデータをRef型変数に格納し、Vue側のComputedにて変更検知時に加工して出力した文字をリアルタイムで表示する機能があるのですが動作しています

上記のものとは違いますが、確認しやすい再現可能なコードを以下に載せます

CountView.vue

1<template> 2 <div>{{ count }}</div> 3 <v-btn @click="countUp()"></v-btn> 4</template> 5 6 7<script setup> 8 import { count } from '../compositions/state'; 9 10 function countUp(){ 11 count.value += 1 12 } 13</script>

state.ts

1import { ref } from "vue"; 2 3export const count = ref(0)

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

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

#3

rykss

総合スコア100

投稿2023/02/18 09:13

#2に関しての別検証です
コンポーネント2つまたVue内外両方からカウントアップ

App.vue

1<template> 2 <v-app> 3 <v-main> 4 <CountView/> 5 <br> 6 <SecondComp/> 7 </v-main> 8 </v-app> 9</template> 10 11<script> 12import CountView from './components/CountView.vue' 13import SecondComp from './components/SecondComp.vue'; 14 15export default { 16 name: 'App', 17 18 components: { 19 CountView, 20 SecondComp, 21 }, 22 23 data: () => ({ 24 // 25 }), 26} 27</script> 28

CountView.vue

1<template> 2 <div>{{ count }}</div> 3 <v-btn @click="countUp()">CountUp(Vue)</v-btn><br> 4 <v-btn @click="countUpFromState()">CountUp(state)</v-btn><br> 5 6</template> 7 8 9<script setup> 10 import { count, countUp as countUpFromState } from '../compositions/state'; 11 12 function countUp(){ 13 count.value += 1 14 } 15 16</script>

SecondComp.vue

1<template> 2 3 <div>FromSecond</div> 4 <v-btn @click="countUp()">CountUp(Vue)</v-btn><br> 5 <v-btn @click="countUpFromState()">CountUp(state)</v-btn><br> 6 7 </template> 8 9 10<script setup> 11 import { count, countUp as countUpFromState } from '../compositions/state'; 12 13 function countUp(){ 14 count.value += 1 15 } 16 17</script>

state.ts

1import { ref } from "vue"; 2 3export const count = ref(0) 4 5export function countUp(){ 6 count.value += 1 7}

通常通り動作しています
制作したアプリはVue Routerを使ってページをまたいで別モジュールの変数を表示しているためRouter関連を使用しても動作するようです
CompositionAPIなどが影響しているんでしょうか…?

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

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

最新の回答から1ヶ月経過したため この意見交換はクローズされました

意見をやりとりしたい話題がある場合は質問してみましょう!

質問する

関連した質問