在uni-app使用vue3使用vuex

在uni-app使用vue3使用vuex

1.在项目目录中新建一个store目录,并且新建一个index.js文件

在这里插入图片描述

import { createStore } from 'vuex';export default createStore({//数据,相当于datastate: {count:1,list: [{name: '测试1', value: 'test1'},{name: '测试2', value: 'test2'},{name: '测试3', value: 'test3'},],},getters: {},//里面定义方法,操作state方发mutations: {add(state){state.count++}},// 操作异步操作mutationactions: {},modules: {},
})

2.配置main.js文件

import App from './App'
import store from './store';  //加上这里
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'const app = new Vue({...App
})
app.$mount()
// #endif// #ifdef VUE3
import uviewPlus from '@/uni_modules/uview-plus'
import { createSSRApp } from 'vue' 
export function createApp() {const app = createSSRApp(App)app.use(uviewPlus)app.use(store); //加上这里return {app}
}
// #endif

3.在文件中引用使用

import {mapState,mapMutations} from 'vuex' //mapState是存的数据,mapMutations是存的方法
...mapState({list: state => state.list  //相当于重命名了}),

或者换一个简写

  computed:{...mapState(['count','list']),}

在 onLoad()中可以打印出来

 onLoad() {console.log(this.count)},

使用缓存方法,在methods中:

methods:{...mapMutations(['add']),
}

在需要的位置直接用

  onLoad() {console.log(this.count) //1this.add();console.log(this.count) //2}

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

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

相关文章

LLM笔记:训练大模型之并行化

1 数据并行 最常见的并行化手段主要是把数据分成多个块,然后每个节点就可以在本地独立的跑各自的数据任务,最后再和其他节点通信,进而汇总最后的结果好处就是计算效率高,每个节点可以独自计算自己的任务且这种方法易于实现缺点就…

springboot筛选当月,本周,当天数据

按天分组&#xff0c;create_time是表中的字段 Query(value "SELECT DATE_FORMAT( create_time, %Y-%m-%d ) date, COUNT( * ) number FROM register_user where create_time BETWEEN ?1 and ?2 GROUP BY date; ",nativeQuery true) List<Map> countDay(…

【长亭WAF(雷池)——网站保护之“动态防护”】

在当今的网络安全环境中&#xff0c;Web应用防火墙&#xff08;WAF&#xff09;扮演着至关重要的角色。 它们不仅能够防御常见的Web攻击&#xff0c;如SQL注入、跨站脚本攻击&#xff08;XSS&#xff09;等&#xff0c;还能够应对日益复杂的网络威胁。 作为业内领先的Web安全解…

Python高级编程——Functools的使用方法

目录 一、引言 二、funtools.partial 三、functools.lru_cache 四、functools.reduce 五、functools.update_wrapper 六、functools.total_ordering 七、functools.singledispatch 八、functools.cached_property ( > Python 3.8) 九、参考资料 一、引言 Python是一…

《安富莱嵌入式周报》第339期:单片机运行苹果早期Mac系统模拟器,2GHz示波器有源探头,下一代矩阵开关面包板,卡片式声音分贝器,HP经典示波器,ReRAM

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版 https://www.bilibili.com/video/BV1Kf421Q7Lh 《安富莱嵌入式周报》第339期&#xff1a;单片机运行苹果早期Ma…

嵌入式Linux系统编程 — 6.3 kill、raise、alarm、pause函数向进程发送信号

目录 1 kill函数 1.1 kill函数介绍 1.2 示例程序 2 raise函数 2.1 raise函数介绍 2.2 示例程序 3 alarm函数 3.1 alarm函数介绍 3.2 示例程序 4 pause函数 4.1 pause函数介绍 4.2 示例程序 与 kill 命令相类似&#xff0c; Linux 系统提供了 kill()系统调用&#…

Chapter9 更复杂的光照——Shader入门精要学习笔记

Chapter9 更复杂的光照 一、Unity的渲染路径1.渲染路径的概念2.渲染路径的类型①前向渲染路径a. 前向渲染路径的原理b. Unity中的前向渲染c. 两种Pass ②延迟渲染路径a. 延迟渲染路径的原理b. Unity中的延迟渲染c. 两种Pass ③顶点照明渲染路径 二、Unity的光源类型1.光源类型①…

Webpack: 核心流程之Init、Make、Seal

概述 在前文中&#xff0c;我们了解了 Webpack 的基本应用、性能优化、Loader 与 Plugin 组件开发方方面面的知识&#xff0c;相信学习过这些内容之后&#xff0c;你已经对 Webpack 有相当深入的理解了&#xff0c;可以开始从更底层的视角&#xff0c;自底向上重新审视 Webpac…

直流电机介绍

一、引入 电机&#xff0c;即电动机&#xff08;motor&#xff09;俗称马达&#xff0c;是电能转化为机械能的总称&#xff0c;按工作原理分类电机可以分为&#xff1a;直流电机&#xff08;通过直流电源供电&#xff0c;依靠电刷和换向器改变电流方向&#xff0c;产生连续转动…

文献解读-长读长测序-第十四期|《作为了解棉花驯化的资源,印度棉(Gossypium herbaceum L. Wagad)基因组》

关键词&#xff1a;基因组&#xff1b;长读长测序&#xff1b;棉花基因组&#xff1b; 文献简介 标题&#xff08;英文&#xff09;&#xff1a;The Gossypium herbaceum L. Wagad genome as a resource for understanding cotton domestication标题&#xff08;中文&#xff…

命令在crontab中的行为和在命令行中的行为不一致

在crontab中&#xff0c;如果设置一个定时任务echo 123 &> log.txt&#xff0c;会发现执行完成后&#xff0c;cat log.txt为空。 但在bash中&#xff0c;如果执行echo 123 &> log.txt&#xff0c;执行完成后&#xff0c;cat log.txt会打印123。 这是因为在cront…

DBdoctor v3.2.2 版本发布,支持对sqlserver、vastbase的纳管!

DBdoctor 3.2.2版本新增PgSQL的索引推荐及性能审核功能&#xff1b;拓展了oracle的纳管版本并支持纳管oracle rac&#xff1b;新增对sqlserver、vastbase数据库的纳管支持&#xff1b;修复了体验官活动中大家提出的一系列体验问题。 详细更新内容如下&#xff1a; 功能优化 Pg…

贪心算法题目总结

1. 整数替换 看到这道题目&#xff0c;我们首先能想到的方法就应该是递归解法&#xff0c;我们来画个图 此时我们出现了重复的子问题&#xff0c;就可以使用递归&#xff0c;只要我们遇到偶数&#xff0c;直接将n除以2递归下去&#xff0c;如果是奇数&#xff0c;选出加1和减1中…

我在手提电脑上将大模型训练成了语文老师

&#xff08;图片由大模型生成&#xff0c;如有侵权&#xff0c;立删&#xff09; 记得一年多以前&#xff0c;和不少商家交流大模型解决方案时&#xff0c;他们谈到内部有很多的资料&#xff0c;可以对大模型进行训练&#xff0c;让大模型变得更有智慧&#xff0c;从而为客户…

Day9:逆波兰表达式求值150 滑动窗口最大值239 前 K 个高频元素347

题目150. 逆波兰表达式求值 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int evalRPN(vector<string>& tokens) {//使用栈来消除stack<string> st;for(int i0;i<tokens.size();i){if(tokens[i]""||tokens[i]"-"|…

创新赋能,高效二开!CRMEB 标准版 v5.4公测版发布

历经十年磨砺&#xff0c;CRMEB 标准版如今已成为众多技术开发者与企业二次开发、构建定制化项目的热门系统&#xff0c;其全开源无加密、功能齐全、独立部署的特质&#xff0c;造就了标准版系统方便二开的优势&#xff0c;不仅深受开发者喜爱&#xff0c;更因其实用性和可靠性…

运行vue : 无法加载文件 C:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。

报错背景: 重装了win10系统,然后准备安装Vue,这个时候我已经安装好了node.js和npm,输入node -v和npm -v都有正确输出,但是每次输入npm install -g vue/cli 安装的时候,就会报错. 大家安装node.js的时候最好就是默认路径(C:\Program Files\nodejs),别去修改不然很多报错.(个人…

<Linux> 进程间通信(一)

文章目录 进程间通信管道 进程间通信 进程间通信的核心&#xff1a;让不同的进程看到同一份资源&#xff08;内存&#xff09;纯内存级&#xff0c;不会将数据落到内存上 管道 管道就是文件&#xff0c;只能单向通信&#xff0c;一端只保留写&#xff0c;一端只保留读 管道是…

Linux Centos7部署Zookeeper

目录 一、下载zookeeper 二、单机部署 1、创建目录 2、解压 3、修改配置文件名 ​4、创建保存数据的文件夹 ​5、修改配置文件保存数据的地址 ​6、启动服务 7、api创建节点 一、下载zookeeper 地址&#xff1a;Index of /dist/zookeeper/zookeeper-3.5.7 (apache.org…

名企面试必问30题(十五)——你的学历有点低,你怎么看?

1.思路 首先承认学历低这一事实&#xff1a;我坦诚地承认自己的学历相对较低。 后续解决方案&#xff1a;不过&#xff0c;我相信能力的展现不仅仅取决于学历。在过往的工作经历中&#xff0c;我积累了丰富的实践经验&#xff0c;培养了较强的学习能力和解决问题的能力。我会持…