VueCLIでVuexを使ってみる

はじめに

今回は、VueCLIとVuexを導入する際に基本的なエラーで詰まってしまったので、丁寧めに導入手順をまとめていきます。

環境

macOC catalina 10.15.7
npm: '7.0.15',
@vue/cli 4.5.11

VueCLIを導入

公式に掲載されてある通りに導入していきます!

cli.vuejs.org

$ npm install -g @vue/cli

または

$ yarn global add @vue/cli
my-projectの作成

こちらも公式の通り、my-projectを作成します。

vue create my-project

Vuexを使う前提であれば、
Manually select featuresでBableとVuexだけ選択してインストールすればいいのですが、
今回は既存のアプリケーションに後からVuexを導入するという形で進めていきます。

Vuexを使う前提であれば、Manually select featuresでBableとVuexだけ選択してインストール

f:id:voyag:20210211113752p:plain
VueCLI

今回はDefault (Vue 3 Preview) ([Vue 3] babel, eslint) を選択

f:id:voyag:20210211114539p:plain
create my-project

ターミナルで以下の通り入力し、

 $ cd my-project
 $ yarn serve
localhostで画面を確認できれば完了(ポート番号はターミナルに表示されています)
f:id:voyag:20210211115632p:plain
HelloVue

zsh: command not found: vue

上記の手順は問題なくmy-projectを作成できた場合ですが、パスが通っていない場合は、ターミナルに以下のような表示が出てしまいます。

$zsh: command not found: vue

私の場合はインストール先を変更することで、このエラーに対処できました。

$ npm config set prefix /usr/local && npm install -g @vue/cli

参考: vue-loader zsh: command not found: vue

Vuexを導入

状態管理パターン + ライブラリのVuexを導入します。

vuex.vuejs.org

NPM

$ npm install vuex --save

Yarn

$ yarn add vuex

VuexでHello Vuex

Vuexを使ってHello Veuxを表示させる一連の流れで、Vuexの導入方法を確認していきます!

Hello Vuex

はじめにApp.vueでHello Vuexを表示させます。 ここでは、Vuexは使っていません。

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script> export default { name: 'app', data: function(){ return { message : 'Hello Vuex' } } } </script>

localhostを確認してHello Vuexと表示されていればOKです。

index.jsを作成

次にstoreディレクトリにindex.jsを作成します。

$ mkdir src/store
$ touch src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({ state: { message: 'Hello Vuex' }, mutations: { }, actions: { }, modules: { } })

stateを呼び出してHello Vuex

次に、先ほどindex.jsのstateに記述したmessageをApp.vueで呼び出します。

<template>
  <div id="app">
    <h1>{{ $store.state.message }}</h1>
  </div>
</template>

<script> export default { name: 'app', data: function(){ return { message : '' } } } </script>

localhostにアクセスしてHello Vuexが表示されているか確認します。 vue create my-projectでManually select featuresを選択した場合は表示されているかと思います。

TypeError: Cannot read property 'state' of undefined

localhostで何も表示されていないとき、consoleを確認してみると以下のエラーが発生しています。

TypeError: Cannot read property 'state' of undefined

Vuexのstateを呼び出せていないので、App.vueで以下を追加します。

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script> import store from './store' //storeディレクトリからindex.jsをインポートする

export default { name: 'app', computed: { message:function(){ return store.state.message //computedプロパティを利用して、store内のstateからmessageを呼び出す } } } </script>

これでVuexを使ってHello Vuexと表示させることができました!

f:id:voyag:20210211150751p:plain
Hello Vuex

その他のエラー

nmp install vuex --save

nmp install vuex --saveを実行した際に以下のエラーが発生しました。

$ npm install vuex --save                                                                                                                                                     ✘ 1
$ npm ERR! code ERESOLVE
$ npm ERR! ERESOLVE unable to resolve dependency tree
$ npm ERR!
$ npm ERR! While resolving: my-project@0.1.0
$ npm ERR! Found: vue@3.0.5
$ npm ERR! node_modules/vue
$ npm ERR!   vue@"^3.0.0" from the root project
$ npm ERR!
$ npm ERR! Could not resolve dependency:
$ npm ERR! peer vue@"^2.0.0" from vuex@3.6.2
$ npm ERR! node_modules/vuex
$ npm ERR!   vuex@"*" from the root project
$ npm ERR!
$ npm ERR! Fix the upstream dependency conflict, or retry
$ npm ERR! this command with --force, or --legacy-peer-deps
$ npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
$ npm ERR!
$ npm ERR! See /Users/xxxxxxxxxx/.npm/eresolve-report.txt for a full report.

$ npm ERR! A complete log of this run can be found in: $ npm ERR! /Users/xxxxxxxxxxx/.npm/_logs/2021-02-11T05_42_06_234Z-debug.log

エラーの中で、以下のいずれかのオプションをつけて再度実行することを提案されています。

--force, or --legacy-peer-deps

何事も強制的にやってしまうのは怖いので、できれば後者のオプションでやってみたいがどうなるのか 調べていると、

We have identified automatic peerDependencies installation as a potentially disruptive change for many users (中略) In order to get unblocked and install your project in spite of peerDependencies conflicts, you can use the --legacy-peer-deps flag at install time.

引用:npm Blog Archive: npm v7 Series - Beta Release! And: SemVer-Major Changes in npm v7

このような記述を見つけました!
どうやらnpm v7でpeerDependenciesプロパティで管理されているパッケージがnpm install実行時に
自動でインストールされるようになったようで、従来の挙動を期待するなら--legacy-pper-depsをつけてやればいいよ
ということなので、この方法で再度インストールし、エラーを解消しました!

Vue.use() is throwing “Cannot read property 'use' of undefined”

Hello Vuexが表示されず、consoleを確認してみると、以下のエラーが。

 Vue.use() is throwing “Cannot read property 'use' of undefined”

これまで普通に使ってたんですけどね、Vue.use()
こちらも3.xで使われなくなったようで、以下の手順で解消しました!

$ npm uninstall vuex
$ npm i vuex@4.0.0-alpha.1

import { createStore } from 'vuex'

const store = createStore({ state () { return { message: 'Hello Vuex' } } })

export default store;

参考

Installation | Vuex

入門者必読、vue.jsの状態管理Vuexがわかる | アールエフェクト

Vuex this.$store undefined in component? - Get Help - Vue Forum

Global API | Vue.js

vue.js - Vue.use() is throwing "Cannot read property 'use' of undefined" - Stack Overflow

当サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。