隐藏

详解vuex数据传输的两种方式及this.$store undefined的解决办法

发布:2022/3/22 9:08:35作者:管理员 来源:本站 浏览次数:1672

这篇文章主要介绍了vuex数据传输的两种方式 及 this.$store undefined的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

这个问题很乌龙,但也很值得记录一下, 原因是main.js中import store时将store的首字母写成了大写.


问题版本的如下所示:

1


import Store from './store'


我大概看了一下, vue似乎不支持在import部分包含带首字母大写的变量,所有import进来的对象必须要小写,我试过把router改成Router, 发现路由部分也会受影响.


这种方式是典型的将vuex值及其中的方法暴露给所有的组件使用, 即将vuex视作一个"全局变量", 但vuex也可以仅提供给部分组件,即谁想用,在谁的script中import这个vuex对象.


第一种方式 - 将vuex提供给所有组件(即在main.js中注册)



//main.js

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/index.css'


Vue.config.productionTip = false

Vue.use(ElementUI)


new Vue({

router,

store,

render: h => h(App)

}).$mount('#app')



//store/index.js

import Vue from "vue";

import Vuex from "vuex";


Vue.use(Vuex);


const store = new Vuex.Store({

 state: {

   n:101

 }

})

export default store



//view部分,即真正的可视化的部分, 这个任何一个组件都可以

<template>

 <div>

   {{ n }}

 </div>

</template>

<script>

export default {

computed: {

 n () {

   return this.$store.state.n

 }

}

}

</script>


第二种方式, 仅部分组件可使用vuex



//main.js - 去掉了store的声明

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'


Vue.config.productionTip = false

Vue.use(ElementUI)


new Vue({

router,

render: h => h(App)

}).$mount('#app')



//store/index.js - 这个文件和上面的一样

//想要使用vuex数据的组件. 注意,此时$store是无效的,所以只能通过store.state.n来获取

<template>

 <div>

   {{ n }}

 </div>

</template>

<script>

import store from './store'

export default {

computed: {

 n () {

   return store.state.n

 }

}

}


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。