常連

### 聞きたいこと
下のようにtemplate内で三項演算子を使用して、表示されるアイコンを切り替えたいと思っています。

```
<template>
  <div>
    {{ emotion ? <smile-icon /> : <bad-icon /> }}
  </div>
</template>

<script lang="ts">
import { defineComponent, SetupContext, computed } from '@vue/composition-api';

export default defineComponent({
  components: {
    SmileIcon: () =>
      import('@/assets/icons/smile.svg?inline'),
    BadIcon: () => import('@/assets/icons/bad.svg?inline'),
  },
  props: {
    emotion: {
      type: Boolean,
      required: true,
    },
  },
});
</script>
```

ただ、`expression expected` といったエラーが表示されてしまいます。

### 参考にしたコード
https://github.com/vuejs/vue-hackernews-2.0/blob/98399b55c6f1da4197840ba76189795b3e95be0f/src/components/Comment.vue#L9-L14

上のように三項演算子に右辺に文字列を指定すると問題なく動作するのですが、コンポーネントを指定したいと思っています。

[Vue]template内で三項演算子を使用して表示するコンポーネントを変更したい

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

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

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

参考URL：[Vue.jsで状態管理する方法！(グローバルなストアを作成)](https://codelikes.com/vue-global-store/)

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

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

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

Vue-cliで開発する学習をしているのですが、ローカルサーバーが起動しなくなりました。
以下に試したことを記載します。
解決策をご存知の方、アドバイスいただけると幸いです。

## 試したこと
```bash
yarn serve
yarn run v1.15.2
$ vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin 
```
上記のyarnコマンドでyarnを起動しようとすると以下のエラーが表示されます。

### エラー表示
```bash
 ERROR  Failed to compile with 1 errors                                                                       23:05:27

This dependency was not found:

* core-js/modules/es6.function.name in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/
lib!./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-l
oader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save core-js/modules/es6.function.name
^C
MacBook-Pro:practice_vue_firebase user$ npm install --save core-js/modules/es6.function.name
npm ERR! code ENOLOCAL
npm ERR! Could not install from "core-js/modules/es6.function.name" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2019-04-17T14_05_46_073Z-debug.log

```

npmをインストールしてくださいと表示されているので記載の「npm install --save」コマンドを実行すると、そんなファイルはないよ、みたいなエラーが表示されます。

### そのほか
・nodemoduleとpackage.jsonを一度消してみて再実行もやってみましたが事象は解決されずでした。

Vue,jsのローカルサーバーがThis dependency was not found表示で起動できない

### 前提
vue3で現状vuexを使っていたのですが、それをpiniaに変更しようとしています。

router/index.tsというルーティングを管理するファイルと
network/httpClient.tsというaxiosを管理するファイルが有り、このあたりでエラーが出た場合アラートを出したいり、ログインの管理をしています。
ただこれらのコンポーネント以外のファイルでstoreを呼び出すと以下のエラーが出ます。

storeの呼び出し
```
import { useAlertStore } from '../store/alert';
const alertStore = useAlertStore();
```
ブラウザのコンソールエラー
```
main.js:21 Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
	const pinia = createPinia()
	app.use(pinia)
This will fail in production.
```
###  試したこと
#### try1) 新しくcreatePiniaする

そこで
https://qiita.com/Naoto_Ito/items/ede2b0a09f474df5e704
を参考に
```
import { setActivePinia, createPinia } from 'pinia'
import { useMyStore } from './myStore'

// 方法1：Piniaインスタンスを作って普通に注入
const pinia = createPinia()
const myStore = useMyStore(pinia)

// 方法2：setActivePinia()を利用
setActivePinia(createPinia())
const myStore = useMyStore()
```
追加しました。

すると方法1の方ではエラーは出なくなったのですが、そこで呼び出したactionの内容をコンポーネントで呼び出ししても、影響がありませんでした。
方法２では解消しませんでした。

#### try2) vueのpluginを読み込むときに使っているpiniaのインスタンスをstoreの引数に渡してみた。

```
const app = createApp(App)
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

import { useAlertStore } from './store/alert';
const alertStore = useAlertStore(pinia);

class HttpClient {
　　　　alertStore.openAlert({
                text: 'TEST',
                type: "error"
              })

....省略

const httpClient = new HttpClient();
app.config.globalProperties.$httpClient = httpClient
```
これでうまく動作しました。

main.tsのpluginをuseしたときにpiniaのインスタンスと同じものを使えば良さそう。
ただそれだとHttpClientをvueコンポーネントの外で使うことができない。

例)vue コンポーネント内でならthisで呼べるようになっている。
```
const res = await this.$httpClient.put(..);
```
しかしstoreなどvueコンポーネント外で使う場合はimportする場合があるがそうするとstoreが使えないということになる。
```
import { httpClient } from "@/admin/network/httpClient";
```

なにか良い解決方法などあれば教えていただきたいです。


### 補足
SPAです。

### 参考
githubの同様っぽい質問
* https://github.com/vuejs/pinia/discussions/971
* https://pinia.vuejs.org/core-concepts/outside-component-usage.html#single-page-applications

参考1
* https://jasonwatmore.com/post/2022/05/26/vue-3-pinia-jwt-authentication-tutorial-example
* https://github.com/cornflourblue/vue-3-pinia-jwt-authentication-example

参考2
* https://jasonwatmore.com/post/2022/07/25/vue-3-pinia-user-registration-and-login-example-tutorial
* https://github.com/cornflourblue/vue-3-pinia-registration-login-example

ここの参考ではhelperなどのコンポーネント外でstoreを呼び出して使っているようなのですが、なぜエラーが起きずに使えているのか不明
https://github.com/cornflourblue/vue-3-pinia-registration-login-example/blob/master/src/helpers/fetch-wrapper.js


vueコンポーネントの外でpiniaのactionを実行しても、その内容がvueコンポーネントの中には影響されない

vuexのstore側にaxiosでapiのレスポンスを返すメソッドを作成しコンポーネント側で前述のメソッドを使用しレスポンスデータを受け取る事を目的としていますがうまくいきません。

```javascript
//store.js
...
actions: {
  returnAPI() {
    axios.get('hogehuga').then((response) => {
      return response
    })
  }
}

```

```javascript
//コンポーネント側
data() {
  return {
    ApiData: ''
  }
},
created() {
　//Promiseが返るがメソッド側と同じように.then()では取れない？
  console.log(this.createAPI())
},
methods: {
  ...mapActions([
    'returnAPI'
  ])
},
```
コンポーエント側でメソッドを呼んだところPromiseが返ってきているようですがメソッド側と同じように.then()ではレスポンスデータを取得できない？です。
こちらはどのようにすればうまく取得できるのでしょうか？お手数ですがご教授いただけると幸いです。

axiosでレスポンスを返すメソッドを作成したがコンポーネント側でうまく使用できない

現在以下のサイトを参考にツイート投稿アプリケーションを作成していますが、formで送信すると以下のエラーが表示されます。
前回に質問した403エラーは表示されなくなりましたが次は422エラーが表示されます。formバリデーションが問題なのでしょうか。laravel,vueが初心者なので、アドバイス宜しくお願い致します。

参考サイト( Vue.js + Vue Router + Vuex とサーバーサイドに Laravel を使用したシングルページ Web アプリケーションの開発)[リンク内容](https://www.hypertextcandy.com/vue-laravel-tutorial-submit-photo-part-2#%E9%80%A3%E8%BC%89%E8%A8%98%E4%BA%8B%EF%BC%88%E5%85%A816%E5%9B%9E%EF%BC%89)



###エラーメッセージ
```
POST http://localhost:8000/api/tweets 422 (Unprocessable Entity)

[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 422"

found in

---> <TweetForm> at resources/js/components/TweetForm.vue
       <Navbar> at resources/js/components/Navbar.vue
         <App> at resources/js/App.vue
           <Root>


Error: Request failed with status code 422
```

###api.php
```
<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

// 会員登録
Route::post('/register', 'Auth\RegisterController@register')->name('register');
// ログイン
Route::post('/login', 'Auth\LoginController@login')->name('login');
// ログアウト
Route::post('/logout', 'Auth\LoginController@logout')->name('logout');
// ログインユーザー
Route::get('/user', function () {
    return Auth::user();
})->name('user');

// tweet投稿
Route::post('/tweets', 'TweetController@create')->name('tweet.create');
```

###TweetController.php
```
<?php

namespace App\Http\Controllers;

use App\Http\Requests\StoreTweet;
use App\Tweet;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Storage;

class TweetController extends Controller
{
    public function __construct()
    {
        // 認証が必要
        $this->middleware('auth');
    }
    /**
     * tweet投稿
     * @param StoreTweet $request
     * @return \Illuminate\Http\Response
     */
    public function create(StoreTweet $request)
    {

        $tweet = new Tweet();
        $tweet->user_id = Auth::user()->id;
        $tweet->text = $request->get('text');


        Auth::user()->tweets()->save($tweet);

        // return redirect()->route('tweets.index', [
        //     'id' => $tweet->id,
        // ]);

        // リソースの新規作成なので
        // レスポンスコードは201(CREATED)を返却する
        return response($tweet, 201);
    }
}
```

###TweetForm.vue
```
<template>
  <nav v-show="value" class="panel panel-default tweet-form">
    <div class="panel-body">
      <div v-show="loading" class="panel">
        <Loader>Sending your tweet...</Loader>
      </div>
      <form v-show="! loading" class="form" @submit.prevent="create">
        <div class="form-group">
          <textarea class="form__item form-control" rows="5" v-model="text"></textarea>
        </div>
        <p>{{ text }}</p>
        <div class="text-right">
          <button type="submit" class="btn btn-primary">ツイート</button>
        </div>
      </form>
    </div>
  </nav>
</template>

<script>
import Loader from './Loader.vue'

export default {
  components: {
    Loader
  },
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      text: '',
    }
  },
  methods: {
    async create () {
      // ローディング表示
      this.loading = true

      const response = await axios.post('/api/tweets', this.text)
      this.reset()
      this.$emit('textarea', false)

      // ローディングを非表示
      this.loading = false

      this.$router.push(`/tweets/${response.data.id}`)
    } 
  }
}
</script>
```

###User.php
```
/**
     * リレーションシップ - tweetsテーブル
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function tweets()
    {
        return $this->hasMany('App\Tweet');
    }
```

###StoreTweet.php
```
<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreTweet extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'text' => 'required'
        ];
    }
}
```

###resources/js/store/auth.js
```
const state = {
  user: null
}

const getters = {
  check: state => !! state.user,
  username: state => state.user ? state.user.name : ''
}

const mutations = {
  setUser (state, user) {
    state.user = user
  }
}

const actions = {
  async register (context, data) {
    const response = await axios.post('/api/register', data)
    context.commit('setUser', response.data)
  },
  async login (context, data) {
    const response = await axios.post('/api/login', data)
    context.commit('setUser', response.data)
  },
  async logout (context) {
    const response = await axios.post('/api/logout')
    context.commit('setUser', null)
  },
  async currentUser (context) {
    const response = await axios.get('/api/user')
    const user = response.data || null
    context.commit('setUser', user)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}
```

Laravel+vueでpostを行なった場合に422エラーが発生する

### 前提・実現したいこと
vuexのShopping Cart Exampleを試しています。
store/index.jsで定義した関数を実行するとエラーが出ます。
初歩的なところで躓いていそうですが、ご教授いただけますと幸いです。


### 発生している問題・エラーメッセージ

```
[Vue warn]: Unhandled error during execution of native event handler 
    at <ProductList> 
    at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
    at <RouterView> 
    at <App>
Uncaught TypeError: _ctx.toCart is not a function
    at onClick
    at callWithErrorHandling
    at callWithAsyncErrorHandling 
    at HTMLButtonElement.invoker 
```
### 該当のソースコード
```vue
//ProductList.vue

<template>
  <div class="hello">
    <ul>
      <li v-for="product in products" :key="product.id">
          {{ product.title }}
        <br />
        <button @click="toCart(product)">Add to cart</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    products() {
      return this.$store.state.products
    },
  },
  created() {
    this.$store.dispatch('getAllProducts')
  },
}
</script>

```
```javascript
//index.js

import { createApp } from 'vue'
import { createStore } from 'vuex'
import shop from '@/api/shop.js'

export default createStore({
  state: {
    products: [],
    items: [],
  },
  mutations: {
    setProducts(state, products) {
      state.products = products
    },
    pushProductToCart(state, product) {
      state.items.push({
        id: product.id,
        quantity: 1,
      })
    },
  },
  actions: {
    getAllProducts({ commit }) {
      shop.getProducts((products) => {
        commit('setProducts', products)
      })
    },
    toCart({ commit }, product) {
      commit('pushProductToCart', product)
    },
  },
  getters: {
    cartProducts: (state) => {
      return state.items.map((item) => {
        const product = state.products.find((product) => product.id === item.id)
        return {
          title: product.title,
          price: product.price,
          quantity: item.quantity,
        }
      })
    },
  },
  modules: {},
})

const app = createApp({})

app.use(createApp)
```


### 補足情報（FW/ツールのバージョンなど）

Vue.js 3.00  vuex 4.00

Vue.js Vuexで定義した関数にアクセスできません

### 実現したいこと

- [ ] 編集中のページでブラウザバックした時に、確認ダイアログを表示したい
- [ ] iPhoneで動作すること

### 前提
環境：Vue3 + Vuex + VueRouter4 + vee-validate

vee-validateのdirtyを見て編集中の場合、`pagehide`イベントをフックして
確認ダイアログを出しています。

### 発生している問題・エラーメッセージ

* iPhoneでは確認ダイアログが出ない。
※PC（Chrome,Firefox）とAndroidでは問題なく確認ダイアログが出る。

### 該当のソースコード

```
<script>
window.addEventListener('pagehide', function(event) {
  event.preventDefault();
  event.returnValue = '';  // Chrome用
});
</script>
```

### 試したこと

* `beforeUnlaod` や `unlaod` イベントを使用したが、iPhoneでは非対応であることが分かった。

