Vue.js Vuexで状態を管理する （値の参照)

<!-- wp:paragraph -->
<p>Vuexにより、コンポーネントから共通でアクセスできるストアという場所が使えるようになります。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>npm install vuex@next でVuexをインストールします。</p>
<!-- /wp:paragraph -->

<!-- wp:loos-hcb/code-block {"langType":"bash","langName":"Bash"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-bash" data-lang="Bash"><code>[root@localhost hell_app]# npm install vuex@next
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {&quot;os&quot;:&quot;darwin&quot;,&quot;arch&quot;:&quot;any&quot;} (current: {&quot;os&quot;:&quot;linux&quot;,&quot;arch&quot;:&quot;x64&quot;})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {&quot;os&quot;:&quot;darwin&quot;,&quot;arch&quot;:&quot;any&quot;} (current: {&quot;os&quot;:&quot;linux&quot;,&quot;arch&quot;:&quot;x64&quot;})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {&quot;os&quot;:&quot;darwin&quot;,&quot;arch&quot;:&quot;any&quot;} (current: {&quot;os&quot;:&quot;linux&quot;,&quot;arch&quot;:&quot;x64&quot;})

+ vuex@4.0.2
added 2 packages from 2 contributors and audited 1342 packages in 17.728s

92 packages are looking for funding
  run `npm fund` for details

found 14 vulnerabilities (10 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:paragraph -->
<p>store.jsを作成します。 値を返す簡単なものにします。</p>
<!-- /wp:paragraph -->

<!-- wp:loos-hcb/code-block {"langType":"js","langName":"JavaScript"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code>import { createStore } from &#39;vuex&#39;

export const store = createStore({
    state() {
        return{
            message: &#39;store dataです!!&#39;
        }
    }
})</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:paragraph -->
<p>main.jsよりstore.jsを組み込みます。</p>
<!-- /wp:paragraph -->

<!-- wp:loos-hcb/code-block {"langType":"js","langName":"JavaScript"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code>import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;

import { store } from &#39;./store.js&#39;

var app = createApp(App)
app.use(store)
app.mount(&#39;#app&#39;)</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:paragraph -->
<p>コンポーネントからストアのデータを参照してみます。</p>
<!-- /wp:paragraph -->

<!-- wp:loos-hcb/code-block {"langType":"js","langName":"JavaScript"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code>&lt;template&gt;
  &lt;div class=&quot;alert alert-primary&quot;&gt;
    &lt;p&gt; {{ $store.state.message }}&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import {reactive} from &#39;vue&#39;

  export default {
    setup(){
      const data = reactive({
      })
      return {
        data
      }
    }
  }
&lt;/script&gt;
</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:paragraph -->
<p>アプリを起動(npm run serve)して動作確認</p>
<!-- /wp:paragraph -->

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146872/71557301-98a0-9e7d-c46e-d130ea2a9744.png)