Store内外 state/mutations 冲突问题

最新推荐文章于 2024-05-17 14:35:35 发布
最新推荐文章于 2024-05-17 14:35:35 发布
阅读量416 收藏
点赞数
分类专栏： vue学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/adammaokkk/article/details/109345105
版权
在学习Vuex时遇到了State冲突问题，错误提示为'state'被赋值但未使用。理解到Store内外的state必须唯一，外部存在state时，Store内的state不能用括号。解决办法包括：确保Store内部的state定义无误，避免Store内外state冲突；同时，mutations可能也有类似问题。接下来将深入研究state和mutations并撰写相关介绍。
摘要由CSDN通过智能技术生成

这两天初学vuex，在编写程序的时候遇到这个问题，state冲突，改了半天才把error解决，记录一下这个问题和自己的一点理解。


我一开始是这么写的

在这里插入图片描述
得到报错如下

在这里插入图片描述


我的理解 是写在store内外的state只能唯一
要是外面有state并存数，Store内的state就不能带括号
要是外面无state，那就可以在Store内给state存数


比如在外面写了state，还在Store内用了带括号的state如下

在这里插入图片描述

Vue就会给你报错：

error: ‘state’ is assigned a value but never used (no-unused-vars) at src\store.js:6:7:

在这里插入图片描述

翻译过来即是

最低0.47元/天 解锁文章
AdamMaoKkk
关注
专栏目录
vue项目都在什么时候用store.state、$store.state和this.$store.state
sendudu的博客
08-13 1万+
store 和 [this.]$store 单来说，如果你在根组件下注入了store那么所有的.vue文件里使用就可以直接用 this.$store.xxxx Vue官网：为了在 Vue 组件中访问 this.$store.property，你需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制 //main.js import store from './store' new Vue({ el: '#a
【Vue】在VsCode中报错 error ‘xxx‘ is assigned a value but never used的解决方法
【敦厚的曹操】的专栏
06-13 4822
【Vue】在VsCode中报错 error ‘xxx‘ is assigned a value but never used的解决方法
错误 “error ‘XXX‘ is assigned a value but never used no-unused-vars“
yy_alone的博客
08-22 2898
在package.json中配置项rules添加 no-unused-vars: off。代码未出问题但是报错，网上查了之后发现是eslint的问题
报错“error ‘res‘ is assigned a value but never used no-unused-vars“
qq_48617322的博客
10-13 911
git上传报错"error 'res' is assigned a value but never used no-unused-vars"
使用pinia遇到的坑
weixin_43257360的博客
04-03 1735
我在app.vue中给router-view套了个spin，把这个spin绑定了一个state,然后在axios封装的js文件中进行修改，但是，在js文件中进行修改，vue文件无法实时监听state的属性变化。我之前Vue2的项目，这个事情都交给Vuex去做，这里，我就想当然的交给pinia去做了。最近在进行vue3的开发中，使用了pinia，在vue文件中引入就是响应式的，确实很好用，但是pinia也有一些缺点，这里分享一些我遇到的和pinia有关的坑以及解决办法。2.非Vue文件中使用无法响应式。
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67402588的博客
03-09 1967
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
web前端面试题（必背面试题）
热门推荐
Z_Gleng的博客
05-25 3万+
自己总结的常见的面试题 总字数13万+ 大概有200+左右道题 会不定期更新
让我们一起愉快地学习vue3.0吧
weixin_43779957的博客
10-06 632
Object.defineProperty => Proxy 重构了虚拟DOM OptionApi => Composition API setup是干啥的？ setup实际上是一个组件的入口，它运行在组件被实例化时候，props 属性被定义之后，实际上等价于 2 版本的beforeCreate 和 Created 这两个生命周期。 setup接受两个参数，第一个参数是props， 另一个参数是context， setup(props, ctx) { console.log(props, .
记录遇到的web前端开发面试题（八股文）
qq_41347964的博客
04-20 1万+
文章目录前言一、javascript相关1.js的八个基本数据类型（高频）2.this的五种指向方式3.Function的call，apply和bind方法的区别？4.Promise，手写promise5.闭包6.原型链，作用域链与原型链的区别？7.继承与继承的五种实现方式8.深拷贝与浅拷贝的区别？（高频）9.事件委托10.var，const和let对比（高频）11.宏任务与微任务12.bind的实现方式13.eventloop，事件循环（超高频）14.new的过程，手动实现一个new方法15.0.1+0.
Vuex 基础
weixin_53500514的博客
04-01 4216
文章目录 目录 文章目录 前言 一、Vuex是什么？ 二、初始化 三、Vuex组成 （一） state 1.定义 2. 原始调用 3.辅助函数 - mapState (二)mutations 1.定义 2.原始调用 3.辅助函数 - mapMutations （三）actions 1.定义 2.原始调用 3.辅助函数 -mapActions （四）getters 1.定义 2.原始调用 ...
Vuex中的$store.state和Storage的区别
加油小伙子
08-05 2889
1、存储位置及类型： Storage 是存在本地缓存； Vuex 是存储在内存中。 localStorage 和 sessionStorage 只能存储字符串类型，对于复杂的对象可以封装storage 2、实效性： localStorage（本地存储）存储在本地，永久保存； sessionStorage（会话存储），临时保存，页面关闭即失效； Vuex 页面刷新时会失效，因为 Vuex 是存在内存中，当页面（F5）刷新时属于清除内存，Vuex 存储的值会丢失。因此需要重新拉取解决这一问题 3
vue踩坑：error 'res' is assigned a value but never used no-unused-vars
祈澈菇凉
04-08 1万+
写代码的时候，遇到了这样的一个报错 error in ./src/views/CategoryEdit.vue Module Error (from ./node_modules/eslint-loader/index.js): D:\node-vue-moba\admin\src\views\CategoryEdit.vue 24:11 error 'res' ...
is defined but never used与is assigned a value but never used
weixin_36562747的博客
12-06 1万+
is defined but never used 一般出现在引用（import）了资源以后并没有使用，未引用的东西删除即可 is assigned a value but never used 常见在定义了变量但是没有使用此变量 ...
eslint react xxx is assigned a value but never used 的解决办法
Dove的博客
10-29 2916
原因：Eslint的语法检查导致的 在声明变量的当前行加上一条注释// eslint-disable-line no-unused-vars var Datalist = [] // eslint-disable-line no-unused-vars
vuex-store状态管理仓库的核心概念五个（state，getter，matation，action，module）详细解析（2024-05-17）
最新发布
hap1994的博客
05-17 1875
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。Vuex 是一个专为 Vue.js 应用程序开发的。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
组件访问VUEX.store中的state中的数据
qq_44173499的博客
02-27 4026
组件访问VUEX.store中的state中的数据 在组件的computed中，使用this.$store.state.xxx 去访问数据 1.数据仓库store 定义好公共数据 Markup var store = new Vuex.Store({ namespaced:true, state: { totalPrice:100, goods:[ {id:1,title:'iphone',price:399,num:3}..
vue监听store.state中对象的变化不起作用
qq_39085895的博客
06-23 5095
store.state中的对象属性发生改变，引用state的组件中却监听不到变化，深度监听也不起作用，如下代码： // state.js noticeParams: [ { CODE: null, NoticeType: null}, { CODE: null, NoticeType: null}, { CODE: null, NoticeType: null} ] // 所引用组件 export default { methods: { profileJump(p
Vuex.Store中的state和mutations
06-07
在Vuex.Store中，state是用来存储数据的对象，mutations是用来修改state中数据的方法。state中的数据可以被组件通过this.$store.state来访问，而mutations中的方法可以被组件通过this.$store.commit来调用。下面是state和mutations的详细介绍： 1. state state是Vuex.Store中用来存储数据的对象，它包含了应用程序中所有需要管理的状态。state中的数据可以被组件通过this.$store.state来访问。例如，你可以在Vuex.Store中定义一个名为`count`的state，代码如下： ```javascript const store = new Vuex.Store({ state: { count: 0 } }) ``` 在这个例子中，我们在state中定义了一个名为`count`的变量，初始值为0。组件可以通过`this.$store.state.count`来访问这个变量。 2. mutations mutations是Vuex.Store中用来修改state中数据的方法，它们必须是同步函数。mutations中的方法可以被组件通过`this.$store.commit`来调用。例如，你可以在Vuex.Store中定义一个名为`increment`的mutation，代码如下： ```javascript const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } } }) ``` 在这个例子中，我们定义了一个名为`increment`的mutation，它将state中的`count`变量加1。组件可以通过`this.$store.commit('increment')`来调用这个mutation。 mutations中的方法也可以接收额外的参数，例如： ```javascript const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state, amount) { state.count += amount } } }) ``` 在这个例子中，我们定义了一个名为`increment`的mutation，它将state中的`count`变量加上额外的`amount`参数。组件可以通过`this.$store.commit('increment', 10)`来调用这个mutation，将`amount`参数设置为10。 mutations中的方法还可以被异步调用，但是异步操作不能直接修改state中的数据。如果需要在异步操作中修改state中的数据，可以使用actions来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值