Vue学习中的仓库vuex以及其中遇见的错误

已于 2022-11-01 19:57:41 修改
阅读量305 收藏 1
点赞数 1
文章标签： 前端 javascript 开发语言 vue
于 2022-10-31 16:42:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Low__Profile/article/details/127617672
版权

记录一下Vue学习中的仓库vuex以及其中遇见的错误

vuex用于数据存储的仓库，如图为仓库的基本配置在这里插入图片描述
在入口文件main.js中进行引入
在这里插入图片描述
在这里插入图片描述

如果数据比较多且复杂，就可以在store下建立几个小仓库，然后在大仓库中进行引入，
在这里插入图片描述
在这里插入图片描述
最后记录一下在配置仓库中遇见的一些错误
在这里插入图片描述
第一个错误完全是由于自己的粗心，提示的意思大概是路劲找不到，然后通过检查路径并且在网上看有没有类似的错误，检测了自己的路径和配置仓库的所有单词，最后无意中发现是自己仓库下的 js文件名字写错了，把 "index.js " 写为了 “ indxe.js ”,结果就报错了。

在这里插入图片描述

第二个错误是在获取仓库数据时候发生错误了，经过网上一位大佬的指点发现是vuex的版本过高，如果是vue2的项目一般来说vuex的版本装个3就可以（cnpm intsall --save vuex@3 ）
在这里插入图片描述
最终就好了

Low__Profile
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vuex数据异步造成初始化的时候没值报错问题
12-13
当使用vue做登录的时候，我们会把拿到的部分用户信息存在vuex+cookie中，我们知道，vuex的数据是会随着浏览器刷新而丢失的，此时我们会重新请求接口对vuex的数据进行再次赋值，如下 当有cookie但是vuex没有数据的时候再次请求赋值 state mutation vuex的数据是异步的，当我们页面需要直接拿vuex的值进行渲染的时候，初始化瞬间（即请求过程进行的时候），vuex是没有这个值的，如何解决这个问题，暂时总结了三种方法，希望有遇到的大佬进行补充和查错： 1.通过watch和mouted监听并且初始化vuex数据 在mounted的时候初始化该数据 并且watch该
关于vue2使用vuex获取不到state之类的错误
maybeshewill的博客
11-25 2529
虽然最近几乎每天出错点，今天还是觉得不吐不快。报了这个错误Cannot read properties of undefined (reading ‘state’)，百度的时候一个方法都没用但是学到了很多奇怪的出错点（）
从Vuex中获取数据，数据不更新
weixin_56487494的博客
03-21 3091
原因是因为在在获取Vuex数据时，是在页面加载前进行获取，在加载完毕之后，Vuex的数据修改后，你子组件的页面还是初始的数据，并不会进行更新。Vuex中的数据修改之后，子组件的数据不会实时更新，需要切换到其他页面，在切换回来数据才会更新，渲染页面。1. 切换页面，重新获取到修改后的数据，很显然这个办法不符合现实使用场景。2.使用mapState，实时获取的Vuex中的数据状态。为什么会出现这种情况呢？
vue项目 三种解决vuex页面刷新数据丢失的方法【2021-08-19】
指尖笑
10-27 5269
1、问题描述： 一般在登录成功的时候需要把用户信息，菜单信息放置vuex中，作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。 2、解决办法： （1）、分析： 定义刷新前把store存入本地localStorage、sessionStorage、cookie中。 localStorage是永久储存，重新打开页面时会读取上一次打开的页面数据，不断触发l
vue实现将数据存入vuex中以及从vuex中取出数据
10-16
今天小编就为大家分享一篇vue实现将数据存入vuex中以及从vuex中取出数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vuex 在Vue 组件中获得Vuex 状态state的方法
12-02
在Vue组件中获得Vuex状态 Vuex的状态存储是相应式的。在Vue组件中获取Vuex状态总共有 五种 可行的方法。 1.从store实例中读取状态最简单的方法就是在计算属性中返回某个状态：（需要导入store组件） const Counter=...
vue2生态之vuex3的深入学习资料
02-24
涉及内容：State、Getters、Mutation、Action、Module、命名空间、mapState等等一系列api的详细使用方式。
取不到vuex的state中的数据而且不报错(已解决)
qq_44811304的博客
09-23 2040
记录一下由于属性名写错导致取不到 state 中的数据的问题
解决vue中拿不到第一次数据，只能从第二次拿的情况
weixin_45890764的博客
05-02 9285
this.$nextTick 第一种情况： 页面改变了，但是数据没有改变，我们使用的是this.$nextTick，官网是这样解释的：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。我们通过案例来了解： <template> <div id="app"> <button @click="change">按钮</button> <test ref="test" @change="change" /&
vue中解决vuex在页面刷新后数据丢失的问题
kirinlau的专栏
09-30 3012
1. 原因 js代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。 　　刷新页面，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想存储就必须存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。具体选择哪一个就根据你实际需求来选择。 　　 二、...
怎么做到vuex的持久化?
大牛的博客
09-12 515
我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化。 npm i vuex-persistedstate 在模块化的入口文件中引入 +import createPersistedstate from 'vuex-persistedstate' export default createStore({ modules: { user, cart, cate }, // 插件 + plugins: [ + cr
vuex中获取值和设置值
xiaofiy的博客
06-16 6258
vue项目中将非父子组件之间共用的数据也可以通过vuex进行传值 书写vuex 根目录下新建src/store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // 保存公共数据 state: { name: '' }, // vuex中公共数据在motations中设置 mutations: { mSetName (
解决刷新页面vuex数据获取不到的问题
柒个橙子的博客
10-26 6887
现象： 一进入页面可以在mounted中获取到vuex中的数据， mounted() { console.log('???? ~ this.$store.state.user.companyId', this.$store.state.user.companyId); } 但是刷新页面后就获取不到了。 解释： 刷新页面vue实例重新加载，store被重新赋值，要想存储数据就必须存储在外部。 解决思路： 在用户登录之后，获取到用户信息，在存储store数据的同时，再存储到localStorage中。
vue 深度watch，打印出来的新值和旧值一样，怎么解决
qq_32184753的博客
07-10 1552
data(){ return{ tagsList:[] } }, watch:{ tagsList(val,old){ console.log(val); console.log(old); } } ```这样打印出来的val和old是一样的 如何解决呢？方法如下：
vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明
Stars_in_rain的博客
03-25 1万+
vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明 从网上找了好多方法比如在tsconfig文件下增加： { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } }, "exclude": [ "node_modules",
vue 组件使用vuex中的mutations方法报错，报unknown mutation type的错误
热门推荐
m0_58017645的博客
07-27 1万+
报错：【vuex】 unknown mutation type: mutation vuex如果分为几个模块，方法是在某个模块中的话，如果直接在组件中通过this.$store.commit('方法名')是获取不到的，必须要在前面加上模块名，如this.$store.commit('模块名/方法名')才可以获取到。 在项目当中，我当前组件的vuex写在store/DataMonitorStore/DataMonitorStore.js里的，所以这里必须加上模块名。 当前组件是sliderBar.vue
vue中二次封装时引入store里数据报错的问题 Uncaught TypeError: Cannot read properties of undefined (reading ‘getters‘)
weixin_57748417的博客
05-12 3861
vue中二次封装时引入store里数据报错的问题 Uncaught TypeError: Cannot read properties of undefined (reading 'getters')
vue3中使用vuex
最新发布
08-12
在Vue 3中使用Vuex，你需要按照以下步骤进行设置： 1. 安装Vuex：在终端中运行以下命令安装Vuex： ``` npm install vuex@next ``` 2. 创建一个Vuex store：在你的项目中创建一个新的文件（例如store.js），并...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值