vuex运行报错

最新推荐文章于 2023-07-18 18:43:47 发布
最新推荐文章于 2023-07-18 18:43:47 发布
阅读量606 收藏
点赞数 1
分类专栏： vue手脚架 vue.js 前端框架 文章标签： npm webpack vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55853116/article/details/116205975
版权

vuex运行报错

今天写vue项目在使用vuex的时候，遇到一个报错，一直说是一个名字未定义，页面也没渲染出来。

控制台报错：state未定义

在这里插入图片描述

页面报错：页面效果渲染不出来

在这里插入图片描述

在终端中进行调试，一直显示运行成功状态，未见报错

集成终端状态：成功

在这里插入图片描述
后来发现是我少引入了一个插件：store

引入插件：store

只需要在main.js文件中进行引入就可以了

import store from "./store"
new Vue({
  el: '#app',
  store,  //注册使用  this.$store
})

运行效果：

在这里插入图片描述

风轻云淡旳流年
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vuex的使用 以及使用和安装出现报错问题解决
m0_65262198的博客
03-27 3035
Vuex的使用 以及安装和使用出现各种报错问题解决 入门详细教学
使用 vuex 报错 unknown getter
Nonsense_man的博客
08-21 3488
场景： 通过state中的一个值来切换显示 对应的 modal 一开始直接使用$store.state.globalState 无法在模块内实现以下效果 <div v-show="$store.state.globalState =='医生'"> <MedicalCompaniesList ></MedicalCompaniesList> </div> <div v-show="$store.state.globalState =='教师'"&gt.
Vue is not defined错误的几种可能
热门推荐
weixin_54508954的博客
09-09 4万+
Vue is not defined错误的几种可能
报错与解决方式
qq_44776709的博客
12-03 253
‘state’ is not defined vuex 代码 解决方案： 传值要传入 state ,传入state才能通过state获取里面的数据
VUE使用sessionStorage存取对象时会显示[object object]的解决方法
03-09 1264
VUE使用sessionStorage存取对象时会显示[object object]的解决方法
初次使用vuex报错，$store未定义
qq_53606349的博客
01-28 557
初次使用vuex报错Property or method “$store“ is not defined on the instance but referenced during render.
vuex打印的对象有值,但取用的时候没有值 为undefined
狼丶宇先森的网络科技空间
03-29 8014
异步获取的对象,打印的时候可以看到有值,但是实际使用的时候是没有值的 ,原因是vuex的state未初始化定义.
vuex 解决报错this.$store.commit is not a function的方法
10-17
通过运行 `npm install vuex --save` 来添加到项目依赖。接下来，创建一个 `store` 文件夹，并在其中建立 `index.js` 文件，用于定义和导出 store。 在 `index.js` 中，初始化 Vuex store： ```javascript import ...
解决VUEX兼容IE上的报错问题
08-27
通过以上步骤，我们成功地为IE浏览器引入了Promise的polyfill，解决了使用Vuex时在IE上的报错问题。在实际开发过程中，除了Promise外，还可能需要处理其他不被IE支持的特性，如Array.from、Map、Set等。在这种情况下...
build-your-own-vuex:精简vuex源代码，用最少的代码实现一个可以快速阅读的精简版vuex（预期总代码行数不超过100行）
03-23
先来看一下用自己实现的的vuex替代真实的vuex的效果，看看能否正常运行，有没有报错： 从运行结果来看，运行正常，没有问题。 一。完成最简单的通过vuex定义的变量，在任何一个页面可以通过this。$ store.
vue-sourceCode-read:这是vue源代码，版本为2.5.17-beta.0-vue source code
03-24
10. **状态管理**：Vue生态中的`vuex`库提供了集中式的状态管理模式，帮助管理组件之间的共享状态。 在`vue-sourceCode-read-master`这个目录中，你可能会找到以下文件和目录： - `src`：源代码的核心部分，包含了...
watch中监听vuex中state改变监听不到
最新发布
407指导员
07-18 435
watch中监听vuex中state改变监听不到
【vue】报错：mapState is not defined
gz-郭小敏的博客
04-16 1万+
场景： vue-cli项目引入了vuex，在vue component模块中调用以下代码报错。 export default { computed:{ ...mapState({ isLogin: state => state.isLogin, userName:state => state.userName, }), } } 错误： App.vue...
vuex的概念和在使用vuex出错以及解决方法
txq231254的博客
08-10 1116
问题：首先多数小伙伴们可能刚刚开始都会默认去main.js文件里面用import引入vuex插件，并且直接用vue.use(vuex)去使用它，然后在后面再次引入store.js文件，以为会按照顺序从上往下来依次读取执行，其实不对，最先会执行所有的import引入的文件，然后再会读取并且执行其他的，所以本来都是写了，结果却是错误的，就如同出现下面的问题。可以建一个store文件夹，里面新建一个js文件，把vuex引入这里面并且使用，然后再在main.js里引入store文件。...............
uni-app小程序（vue3版本）使用Vuex在调用store时报错： Cannot read property ‘state‘ of undefined
TIANJING_er的博客
05-31 2084
通过搜索是因为我开发的uni-app是vue3版本，但是在使用vuex时使用的是2版本的格式所造成的错误。的实例上，这里要注意一定是加到#ifdef VUE3这个位置下面。这里是开发购物车相关的功能时遇到bug报错，如图所示。在页面渲染时，可以直接使用映射过来的数据。文件夹，专门用来存放。目录上鼠标右键，选择。将以上代码修改为如下。目录上鼠标右键，选择。一、首先配置vuex。
关于vue2使用vuex获取不到state之类的错误
maybeshewill的博客
11-25 2598
虽然最近几乎每天出错点，今天还是觉得不吐不快。报了这个错误Cannot read properties of undefined (reading ‘state’)，百度的时候一个方法都没用但是学到了很多奇怪的出错点（）
用vuex mapState时新写法会出现的错误和注意事项（渲染不出来页面的原因）
YY的博客
12-09 378
用vuex mapState时新写法会出现的错误和注意事项（渲染不出来页面的原因）
Vuex简单理解
weixin_43597991的博客
05-20 390
Vuex是一个状态管理库，自己认为就是一个用来管理一些公用变量的库 创建一个简单的store import { createApp } from 'vue' import { createStore } from 'vuex' // 创建一个新的 store 实例 const store = createStore({ state () { return { count: 0 } }, mutations: { increment (state) {
vuex 命名空间的使用与报错问题
camille009的博客
08-25 1346
默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。 弊端1：不同模块中有相同命名的mutations、actions时，不同模块对同一 mutation 或 action 作出响应。 弊端2：当一个项目中store分了很多模块的时候，在使用辅助函数mapState、mapGetters、mapMutations、mapActions时，很难查询，引用的state、getters、mutations、actions来自于哪个模块，不便于后期维护。 store/i
vuex 中的 mapState 辅助函数的作用及用法
05-12
`mapState` 是 Vuex 中的一个辅助函数，它可以将 store 中的 state 映射到组件的 computed 计算属性中，方便组件直接使用。它的作用可以简化组件中获取 state 的代码，使代码更加简洁和易读。 `mapState` 的语法如下： ```javascript import { mapState } from 'vuex' export default { computed: { ...mapState({ // 将 `this.count` 映射为 `this.$store.state.count` count: state => state.count, // 将 `this.count` 映射为 `this.$store.state.count` // 并提供了一个自定义的计算属性名 `countAlias` countAlias: 'count' }) } } ``` `mapState` 接收一个对象作为参数，对象中的每一个属性都是一个函数或者一个字符串，函数用于计算 state 中的值，字符串则是指定 state 中的属性名。这些计算属性将会被混入到组件的 computed 计算属性中。 在组件中使用 `mapState` 返回的计算属性时，可以直接使用计算属性名即可，无需使用 `$store.state` 来获取 state 中的值。 ```javascript <template> <div> <p>count: {{ count }}</p> <p>countAlias: {{ countAlias }}</p> </div> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState({ count: state => state.count, countAlias: 'count' }) } } </script> ``` 以上代码中，组件中的计算属性 `count` 和 `countAlias` 都是通过 `mapState` 辅助函数从 Vuex 的 state 中映射得来的。这样，我们就可以很方便地在组件中使用这些计算属性了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风轻云淡旳流年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值