[保姆级教程]uniapp配置vueX

在这里插入图片描述

文章目录

  • 注意
  • 新建文件
    • 简单的使用


注意

uniapp是支持vueX的只需配置一下就好

新建文件

在src文件中,新建一个store(如果有的话跳过)
在这里插入图片描述
在store中新建一个js文件,修改js文件名称和选择模板为default
在这里插入图片描述
在 uni-app 项目根目录下,新建 store 目录,在此目录下新建 index.js 文件。在 index.js 文件配置如下

// 页面路径:store/index.js 
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex);//vue的插件机制//Vuex.Store 构造器选项
const store = new Vuex.Store({state:{//存放状态"username":"foo","age":18}
})
export default store

在这里插入图片描述
在 main.js 中导入文件

import store from './store'Vue.prototype.$store = storeconst app = new Vue({store,...App
})

在这里插入图片描述

简单的使用

通过属性访问,需要在根节点注入 store 。

<template><view><text>用户名:{{username}}</text></view>
</template>
<script>import store from '@/store/index.js';//需要引入storeexport default {data() {return {}},computed: {username() {return store.state.username }}}
</script>

在组件中使用,通过 this.$store 访问到 state 里的数据。

<template><view><text>用户名:{{username}}</text></view>
</template>
<script>export default {data() {return {}},computed: {username() {return this.$store.state.username }}}
</script>

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/32253.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue80-全局路由守卫:前置、后置

一、路由守卫的定义 二、需求 在第三步&#xff0c;做校验&#xff01; 三、代码实现 3-1、前置路由守卫 注意&#xff0c;此时就不能将router一开始就暴露出去了&#xff01; to和from是路由组件的信息。 写法一&#xff1a; 写法二&#xff1a; 缺点&#xff1a;若是路由…

51单片机STC89C52RC——6.2 定时器

一&#xff0c;定时器介绍 STC89C51RC/RD系列单片机的定时器0和定时器1&#xff0c;与传统8051的定时器完全兼容&#xff0c;当在定时器1做波特率发生器时&#xff0c;定时器0可以当两个8位定时器用。 STC89C51RC/RD系列单片机内部设置的两个16位定时器/计数器TO和T1都…

Mysql索引 like篇

Mysql索引 like篇 Mysql在查询中使用like的时候&#xff0c;对应的字段上面的索引是否会生效呢&#xff1f; like ‘张’ 用到了索引like ‘张%’ 前缀匹配 用到了索引like ‘%张%’ 中间匹配 没有用到了索引like ‘%张’ 后缀匹配 没有用到了索引 mysql> CREATE TABLE t…

2024.06.10校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 三环集团2025届校园招聘启动&#xff08;内推&#xff09; 校招 | 三环集团2025届校园招聘启动&#xff08;内推&#xff09; 2、实习丨中国汽研第二届检测工程事业部实习生专项…

“论数据访问层设计技术及其应用”必过范文,软考高级,系统架构设计师论文

论文真题 在信息系统的开发与建设中,分层设计是一种常见的架构设计方法,区分层次的目的是为了实现“高内聚低耦合”的思想。分层设计能有效简化系统复杂性,使设计结构清晰,便于提高复用能力和产品维护能力。一种常见的层次划分模型是将信息系统分为表现层、业务逻辑层和数…

HomeController

目录 1、 HomeController 1.1、 Registration 1.2、 BlogDetails 1.3、 Error HomeController using ITM_College.Data;

laravel8框架windows下安装运行

目录 1、安装前如果未安装先安装Composer 2、使用composer安装laravel8 3、使用内置服务器:8000 的命令去访问测试 ​4、使用本地环境运行phpstudy配置到public目录下 Laravel官网 Laravel 中文网 为 Web 工匠创造的 PHP 框架 安装 | 入门指南 |《Laravel 8 中文文档 8.x…

vue3中的$refs 和$parent

$refs 是父可以查看到子的所有数据&#xff0c;假如想要修改的话需要导入 这个意思就是把aaa属性和bbb属性暴漏出去&#xff0c;让父可以修改 definExprop({aaa,bbb}) $parent是子可以查看到父的所有数据&#xff0c;假如想要修改的话需要导入 这个意思就是把aaa属性和bbb属…

[数据集][图像分类]瑜伽动作分类数据集1238张5类别

数据集类型&#xff1a;图像分类用&#xff0c;不可用于目标检测无标注文件 数据集格式&#xff1a;仅仅包含jpg图片&#xff0c;每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)&#xff1a;1238 分类类别数&#xff1a;5 类别名称:["downdog","godde…

聊聊贪心算法

第1部分&#xff1a;引言 贪心算法是一种在每一步选择中都采取当前状态下最优&#xff08;或最有利&#xff09;的选择&#xff0c;从而希望导致结果是全局最优的算法策略。这种算法简单、直观&#xff0c;且在很多情况下能够快速得到一个足够好的解决方案。然而&#xff0c;值…

el-upload 组件上传文件(查询,上传,删除,下载功能)

1.html el-upload中的属性&#xff1a; <el-upload ref"upload" class"upload-demo" // element-ui自带的样式 :headers"headerOdj" // 文件上传的头,带token&#xff08;重要&#xff0c;不然传输大文件会断掉&…

Shell编程规范与变量-01

一、Shell脚本概述 在一些复杂的 Linux 维护工作中&#xff0c;大量重复性的输入和交互操作不仅费时费力&#xff0c;而且容易出错&#xff0c;而编写一个恰到好处的 Shell 脚本程序&#xff0c;可以批量处理、自动化地完成一系列维护任务&#xff0c;大大减轻管理员的负担。 1…

mongosh 和mongo 命令行连接MongoDB

Mongoshell MongoDB的Shell工具mongosh是一个全功能的JavaScript和Node.js的14.x REPL与MongoDB的部署交互环境。我们通过它可以直接对数据库进行查询和操作。这个工具是需要在安装玩MongoDB后单独安装的。 与传统的mongo方式连接MongoDB更加丰富。 官网 https://www.mongodb.…

Java 面试题:如何保证集合是线程安全的? ConcurrentHashMap 如何实现高效地线程安全?

在多线程编程中&#xff0c;保证集合的线程安全是一个常见而又重要的问题。线程安全意味着多个线程可以同时访问集合而不会导致数据不一致或程序崩溃。在 Java 中&#xff0c;确保集合线程安全的方法有多种&#xff0c;包括使用同步包装类、锁机制以及并发集合类。 最简单的方法…

编程语言中的作用域

编程语言中的作用域 作用域&#xff08;Scope&#xff09;是计算机程序设计中的一个核心概念&#xff0c;它主要用于规定程序中变量、函数和对象的可见范围和有效期限。换句话说&#xff0c;作用域决定了在代码的哪些部分可以访问特定的变量、函数或对象。 通过作用域的使用&…

网络编程(八)广播、组播

一、广播 &#xff08;一&#xff09;概念 前面介绍的数据包发送方式只有一个接受方&#xff0c;称为单播 如果同时发给局域网中的所有主机&#xff0c;称为广播 如果同时发给局域网中的部分主机&#xff0c;称为组播 注意&#xff1a; 只有用户数据报(使用UDP协议)套接字才…

AI音乐大模型时代:版权归属与创意产业的新生长点

AI在创造还是毁掉音乐&#xff1f; 简介&#xff1a;最近一个月&#xff0c;轮番上线的音乐大模型&#xff0c;一举将素人生产音乐的门槛降到了最低&#xff0c;并掀起了音乐圈会不会被AI彻底颠覆的讨论。短暂的兴奋后&#xff0c;AI产品的版权归属于谁&#xff0c;创意产业要…

JWT生成令牌

实现步骤 引入JWT包 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.12.3</version> </dependency>定义令牌类型枚举 package com.angel.ocean.token.constant;public enum Toke…

go语言进阶实战学习(逐行注释)(1):两协程并发交替打印数字和字母

要求&#xff1a; 并发两协程交替打印数字和字母。一个协程打印数字&#xff0c;一个协程打印字母。 输出&#xff1a; 12AB34CD56EF78GH910IJ1112KL1314MN1516OP1718QR1920ST2122UV2324WX2526YZ2728 思路&#xff1a; 两个 channel 控制两个协程进行交替打印。sync.WaitG…

PyScada(三)后端应用

PyScada 的后端应用 使用后端 要使用后端&#xff0c;请在浏览器中打开http://127.0.0.1 &#xff08;将 127.0.0.1 替换为 PyScada 服务器的 IP 或主机名&#xff09;&#xff0c;然后使用安装过程 中定义的管理员帐户登录 &#xff08;TODO 链接到创建超级用户文档&#xf…