SoFunction
Updated on 2025-04-05

Detailed explanation of two ways of vuex data transmission and the solution of this.$store undefined

This question is very miserable, but it is also worth recording. The reason is that the first letter of the store is written in capitalization when importing the store.

The problem version looks like this:

import Store from './store'

I roughly looked at it and it seems that vue does not support including variables with initial capitalization in the import part. All objects entering the import must be lowercase. I have tried changing the router to Router and found that the routing part will also be affected.

This method is typically exposing the vuex value and its methods to all components for use, that is, vuex is regarded as a "global variable", but vuex can also be provided to only some components, that is, who wants to use it, and whoever wants to import this vuex object in whose script.

The first way - provide vuex to all components (i.e. register in)

//
import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/'

 = false
(ElementUI)

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')
//store/
import Vue from "vue";
import Vuex from "vuex";

(Vuex);

 const store = new ({
  state: {
    n:101
  }
})
export default store

//view part, that is, the real visual part, any component can<template>
  <div>
    {{ n }}
  </div>
</template>
<script>
export default {
 computed: {
  n () {
    return this.$
  }
 }
}
</script>

The second way is that only some components can use vuex

// - Removed the store's statementimport Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/'

 = false
(ElementUI)

new Vue({
 router,
 render: h => h(App)
}).$mount('#app')
//store/ - This file is the same as above// Components that want to use vuex data. Note that $store is invalid at this time, so it can only be obtained through<template>
  <div>
    {{ n }}
  </div>
</template>
<script>
import store from './store'
export default {
 computed: {
  n () {
    return 
  }
 }
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.