常連

### 聞きたいこと
Vueを使用してWebアプリ開発をしています。
下のようにコンポーネントを作成しているのですが、propsの値によって特定のCSSクラスにスタイルを動的に割り当てたいと思っています。

```
<template>
  <p class="text">Hello</p>
</template>

:

<script>
props: {
  color: {
     type: String,
     default: 'red'.
  }
}
:
</script>

<style>
.text {
  color: 'red';  // もしprops.colorがblueだった場合、このredをblueにしたい
}
</style>
```

## 注意
v-bind:styleを使用してCSSクラスのcolorを直接変更しなくてもcolorは変更できそうですが、できれば既存で定義されたCSSクラスの値を動的に変更したいです。

[Vue]特定のCSSクラスのスタイルを動的に修正する方法

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表示で起動できない

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エラーが発生する

### 前提
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コンポーネントの中には影響されない

### 聞きたいこと
下のように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内で三項演算子を使用して表示するコンポーネントを変更したい

# 前提

「vuex state値をmounted内で使いたい」とタイトルをつけさせていただきましたが、
下記に紹介するソース・目的とするゴールが本当にvue.jsの規定に沿っているのか自体が不安と考えております、合わせてご意見をいただけましたら今後のわたくしの勉強にもなると思います、お手数ではございますがよろしくお願いいたします。

##ソース

####store/posts.js(vuexのソース)
```js
export const state = () => ({
    postsCategories: null
})

export const getters = {
    postsCategories: state => state.postsCategories
}

export const mutations = {
    setPostsCategories(state, postsCategories) {
        state.postsCategories = postsCategories
    }

}

export const actions = {
    async addPostsCategory({ commit }, payload) {
        const newCat = {}
        newCat[payload.slug] = payload
        //console.log(newCat)
        await this.$axios.$patch('/postscategory.json', newCat)
        const postsCategories = await this.$axios.$get('/postscategory.json')
        //const postsCategories = await this.$axios.$get('/postscategory/' + payload.id + '.json')
        commit('setPostsCategories', postsCategories)
    },
    async postsCategories({ commit }) {
        const postsCategories = await this.$axios.$get('/postscategory.json')
        commit('setPostsCategories', postsCategories)
    },

}
```

####テンプレートファイルの記述
```html
<template>
  <section class="container posts-page">
      <multiselect :selected="selected" :options="options" :multiple="true" @update="updateSelected" v-model="payload.categories" placeholder="カテゴリー選択"></multiselect >
 
        <ul>
          <li v-for="(cat,index) in postsCategories" :key="index">{{ cat.name }}</li>
        </ul>
  </section>
</template>

<script>
import { mapGetters } from "vuex";
import Multiselect from "vue-multiselect";
export default {
  components: { Multiselect },
  data() {
    return {
      selected: null,
      options:[]
    };
  },
  methods: {
    updateSelected(newSelected) {
      this.selected = newSelected;
    }
  },
  mounted() {
    const cat = this.$store.state.posts.postsCategories;
    console.log(cat);
    for (var value in cat) {
      this.options.push(value);
    }
  },
  created() {
    this.$store.dispatch("posts/postsCategories");
  },
  computed: {
    ...mapGetters("posts", ["postsCategories"])
  }
};
</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に詳しい方がいらっしゃいましたら、是非とも教えていただきたいです。
よろしくお願いいたします。

vuex state値をmounted内で使いたい

### 前提・実現したいこと
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