uni-app小程序(vue3版本)使用Vuex在调用store时报错: Cannot read property ‘state‘ of undefined

这篇具有很好参考价值的文章主要介绍了uni-app小程序(vue3版本)使用Vuex在调用store时报错: Cannot read property ‘state‘ of undefined。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里是开发购物车相关的功能时遇到bug报错,如图所示
uni-app小程序(vue3版本)使用Vuex在调用store时报错: Cannot read property ‘state‘ of undefined,uni-app,小程序

 文章来源地址https://www.toymoban.com/news/detail-611508.html

通过搜索是因为我开发的uni-app是vue3版本,但是在使用vuex时使用的是2版本的格式所造成的错误

一、首先配置vuex

1. 在项目根目录中创建 store 文件夹,专门用来存放 vuex 相关的模块
2. store 目录上鼠标右键,选择 新建 - > js 文件 ,新建 store.js 文件
uni-app小程序(vue3版本)使用Vuex在调用store时报错: Cannot read property ‘state‘ of undefined,uni-app,小程序

 3. store.js 中按照如下 4 个步骤初始化 Store 的实例对象

报错前代码

uni-app小程序(vue3版本)使用Vuex在调用store时报错: Cannot read property ‘state‘ of undefined,uni-app,小程序

 

 将以上代码修改为如下

uni-app小程序(vue3版本)使用Vuex在调用store时报错: Cannot read property ‘state‘ of undefined,uni-app,小程序

4.main.js 中导入 store 实例对象并挂载到 Vue 的实例上,这里要注意一定是加到#ifdef VUE3这个位置下面

uni-app小程序(vue3版本)使用Vuex在调用store时报错: Cannot read property ‘state‘ of undefined,uni-app,小程序

 5.store 目录上鼠标右键,选择 新建 -> js文件 ,创建购物车的 store 模块,命名为

cart.js 

 uni-app小程序(vue3版本)使用Vuex在调用store时报错: Cannot read property ‘state‘ of undefined,uni-app,小程序

6.在 cart.js 中,初始化如下的 vuex 模块
uni-app小程序(vue3版本)使用Vuex在调用store时报错: Cannot read property ‘state‘ of undefined,uni-app,小程序

 

7.在 goods_detail.vue 页面中,修改 <script></script> 标签中的代码如下:

uni-app小程序(vue3版本)使用Vuex在调用store时报错: Cannot read property ‘state‘ of undefined,uni-app,小程序

8.在页面渲染时,可以直接使用映射过来的数据

uni-app小程序(vue3版本)使用Vuex在调用store时报错: Cannot read property ‘state‘ of undefined,uni-app,小程序

 

 

到了这里,关于uni-app小程序(vue3版本)使用Vuex在调用store时报错: Cannot read property ‘state‘ of undefined的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app+vue3微信小程序切换主题皮肤

    思路来源: https://blog.csdn.net/qq_42611074/article/details/128236458 引用store做全局css变量替换; store.js 添加全局的监听函数 common/themeMixin.js main.js 给要切换的页面加上css变量 login.vue 升级版 在base.css写好主题配色; 引用store做全局css变量替换; store.js 添加全局的监听函数 common/themeM

    2024年02月12日
    浏览(65)
  • 基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例

    uni-chatgpt 一款uniapp+vite4+uview-plus多端ChatGPT模板实例。 全新首发的一款多端仿制chatgpt智能对话实战项目,基于 uniApp+Vue3+Pinia+uViewUI+MarkdownIt 等技术开发搭建项目。支持编译到 h5+小程序+APP端 ,支持markdown语法解析及代码高亮。 全屏沉浸式顶部导航条+底部tabbar 支持解析h5+小程序

    2024年02月12日
    浏览(74)
  • 如何用uni-app+vue3+vant开发微信小程序

    uni-app之前一直只支持vue2语法, 2021年8月:新版支持 了vue3 开发,App平台编译器升级为 Vite; 新版 uni-app 框架主要做了三大改进: 重写框架内核:基于 vue3 + ts 重写内置组件和API,实现更彻底、更高效的 tree-shaking ; 新增支持 Vite 构建工具,在H5平台实现秒开预览; 新增支持

    2024年02月09日
    浏览(66)
  • uni-app开发微信小程序 vue3写法添加pinia

    使用uni-app开发,选择vue3语法,开发工具是HBliuderX。虽然内置有vuex,但是个人还是喜欢用Pinia,所以就添加进去了。 Pinia官网连接 第一步: 在项目根目录下执行命令: npm install pinia 第二步: 配置main.js文件 第三步,使用: 创建store文件夹、创建store/index.js 然后创建store/modu

    2024年02月03日
    浏览(58)
  • uni-app微信小程序分享微信好友与分享到朋友圈功能【vue3+ts+uni-app+vite】

    微信小程序开发结束之后,点击右上角三个点显示: 1、创建share.ts文件 2、全局使用, 在 main.ts 里面 添加全局的 mixin 这样配置结束之后整个小程序所有页面点击右上角转发分享都走的这个文件,如果需要单个页面可以转发,可以看第三点 3、在需要的页面进行调用就行啦 a.

    2024年02月14日
    浏览(76)
  • uni-app vue3+ts+vite开发小程序采坑说明

    uniapp v3 搭建项目使用官方推荐命令 或者是使用 uniapp官方gitee 模板库 在项目启动前UI调用,建议使用 扩展组件(uni-ui)里面有很多组件,不能满足需求自己可以手动修改 uni_modules 为在插件市场下载出来的插件目录(uni-app官方维护的组件库,能够兼容vue3) 自动引用components文件

    2024年02月09日
    浏览(48)
  • 在uni-app使用vue3进行store全局数据共享

    在uni-app中使用vue3进行store的全局数据共享,网上文章太杂了,记录一下自己写的一个最简单易懂的例子,以供自己后面需要用到时候可以最直观的知道到底怎么实现 在index.js中写入代码如下(示例): uni-app好像内置vuex,不需要额外下载,如果记错了的话就得先去下载好 代

    2024年02月09日
    浏览(89)
  • uni-app vue3 封装socket 兼容微信小程序 钉钉小程序 H5 App 全局唯一

    前端小伙伴使用uni-app开发长连接通信的时候都会有以下疑问 在网上搜到的封装socket都没讲怎么全局公用一个呢? 同一个 子协议或者我我们叫type类型型我想在两个页面都接受使用怎么做呢? 目前能搜到的socket 封装好像都没讲清楚这个东西,或者压根没考虑 下面给大家详细

    2024年02月13日
    浏览(66)
  • 创建第一个微信小程序 uni-app + Vue3 + Color UI + Webstorm

    最近打算撸一个小程序练练手,顺便记录下开发过程。。也欢迎感兴趣的小伙伴交流小程序开发经验! 大概会有一个系列的博客吧(尽量不太监 目录 一、前置步骤 1.1 注册微信小程序账号,取得AppID 1.2 下载并安装微信开发者工具 二、uni-app 2.1 下载并安装 HBuilderX 2.2 新建un

    2024年02月07日
    浏览(66)
  • 记录uni-app + vue3 + vite + uni-ui 小程序出现 Invalid pattern 的报错处理

    登录 - Gitee.com uni-ui 现在只推荐使用 easycom ,如自己引用组件,可能会出现组件找不到的问题 uni-ui 不支持使用 Vue.use() 的方式安装 在  vue-cli  项目中可以使用  npm  安装  uni-ui  库  注意  cli 项目默认是不编译  node_modules  下的组件的,导致条件编译等功能失效 ,导致组件

    2024年02月19日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包