这篇文章主要介绍了vuex数据传输的两种方式 及 this.$store undefined的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
这个问题很乌龙,但也很值得记录一下, 原因是main.js中import store时将store的首字母写成了大写.
问题版本的如下所示:
import Store from './store'
我大概看了一下, vue似乎不支持在import部分包含带首字母大写的变本文来源gaodai$ma#com搞$$代**码)网8量,所有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部分,即真正的可视化的部分, 这个任何一个组件都可以 <div> {{ n }} </div>
第二种方式, 仅部分组件可使用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来获取 <div> {{ n }} </div> import store from './store' export default { computed: { n () { return store.state.n } } }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Vuex 在Vue 组件中获得Vuex 状态state的方法
- 在Vue中使用this.$store或者是$route一直报错的解决
- 使用vuex的state状态对象的5种方式
- 详解vuex 中的 state 在组件中如何监听
- 浅谈Vue中的this.$store.state.xx.xx
以上就是详解vuex数据传输的两种方式及this.$store undefined的解决办法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：详解vuex数据传输的两种方式及this.$store undefined的解决办法
转载请注明原文链接：详解vuex数据传输的两种方式及this.$store undefined的解决办法
