Vue.js and vuex: this.$store is undefined

Question

I have already read the question with similar titles but I cannot follow them due to their complexity. I think with my code it will be easier to find a solution for me. I will only include the relevant code.

My store is this: obs: I installed the vuex plugin.

   import Vue from 'vue'; import Vuex from 'vuex';   Vue.use(Vuex)  const state = {     titulo: "please, change title" }   const mutations = {     changeTitle(state, title) {         state.title= title     } }   export default new Vuex.Store({      state : state,     mutations : mutations }) 

My App.vue

 <template>     <div>       <show-title-component ></show-title-component>       <change-title-component></change-title-component>     </div> </template>  <script>   import ShowTitleComponent from './components/ShowtitleComponent'; import ChangeTitleComponent from './components/ChangeTitleComponent'; import store from './vuex/store';  export default {  components: {ShowTitleComponent, ChangeTitleComponent}, store, data: function() {   return {title: 'placeholder'} }   } </script> 

The component that generates the error:

<template><div>{{ title}}</div></template>  <script>  export default {     name: "show-title-component",     computed: {       title() {         return this.$store.state.title   /** error   here */       }     } }  </script> 

Answer 1

Maybe, you have not included the store inside the Vue instance

Your App entry point (app.js or main.js or index.js) must include this code:

import store from './store'  new Vue({  ...  store,  ... }) 

then you can use this.$store in any component

but I recommend the general architecture: https://vuex.vuejs.org/en/structure.html