当前位置: 首页 > news >正文

uniApp 封装VUEX

Vuex Store (index.js)

import Vue from 'vue';
import Vuex from 'vuex';
import Cookies from 'js-cookie';Vue.use(Vuex);const saveStateKeys = ['vuex_user', 'vuex_token', 'vuex_demo'];const initialState = {vuex_user: { name: '用户信息' },vuex_token: Cookies.get('token') || '',vuex_isdev: false,vuex_version: '1.0.1',vuex_demo: '绛紫',vuex_testStore: '测试vuexStore',
};const store = new Vuex.Store({state: {...initialState,},mutations: {},actions: {dynamicAction(context, payload) {return new Promise((resolve, reject) => {context.commit(payload.type, payload.value).then(resolve).catch(reject);});},},
});// 动态生成 mutations 和 actions
const createMutation = (key) => (state, value) => {state[key] = value;saveLifeData(key, value);if (key === 'vuex_token') {Cookies.set('token', value);}
};const createAction = (key) => ({ commit }, value) =>new Promise((resolve, reject) => {commit(`SET_${key.toUpperCase()}`, value).then(resolve).catch(reject);});saveStateKeys.forEach(key => {store.commit(`ADD_MUTATION_${key.toUpperCase()}`, createMutation(key));store.commit(`ADD_ACTION_${key.toUpperCase()}`, createAction(key));
});function saveLifeData(key, value) {if (saveStateKeys.includes(key)) {let tmp = uni.getStorageSync('lifeData') || {};tmp[key] = value;uni.setStorageSync('lifeData', tmp);}
}export default store;

Mixin ($u.mixin.js)

import { mapState, mapActions } from 'vuex';
import store from '@/store';const $uStoreKey = Object.keys(store.state);const dynamicMapActions = (actionsObj) => {return Object.fromEntries(Object.entries(actionsObj).map(([actionName, action]) => [actionName,action.bind(null, store.dispatch),]));
};module.exports = {beforeCreate() {this.$u = {vuex: (name, value) => {if (value !== undefined) {this[`update${name.charAt(0).toUpperCase() + name.slice(1)}`](value);} else {return this[name];}},};},computed: {...mapState($uStoreKey.filter(key => key.startsWith('vuex_'))),},methods: {...dynamicMapActions({...store._modulesNamespaceMap['dynamic'].namespacedActions,}),},
};

使用示例

<template><div><h1>欢迎,{{ user.name }}!</h1><button @click="changeName">更改名字</button></div>
</template><script>
import uMixin from '@/mixins/u.mixin.js';export default {mixins: [uMixin],onShow() {this.$u.vuex('vuex_user', { name: '新用户' });console.log('初始用户信息:', this.$u.vuex('vuex_user'));},methods: {changeName() {this.$u.vuex('vuex_user', { name: '新用户' });},},
};
</script>

全局混入

import Vue from 'vue'
import store from '@/store';
// 引入uView提供的对vuex的简写法文件
let vuexStore = require('@/store/$u.mixin.js');
Vue.mixin(vuexStore);
const app = new Vue({store
})
app.$mount()

相关文章:

uniApp 封装VUEX

Vuex Store (index.js) import Vue from vue; import Vuex from vuex; import Cookies from js-cookie;Vue.use(Vuex);const saveStateKeys [vuex_user, vuex_token, vuex_demo];const initialState {vuex_user: { name: 用户信息 },vuex_token: Cookies.get(token) || ,vue…...

最长公共子序列求长度和输出子序列C代码

求两个字符串的公共子序列我们都知道需要使用用动态规划思想 用res[i][j]表示截止到字符串A的第i个字符串和截止到字符串B的第j个字符的最长公共子序列。如两个字符串helloworld和loop&#xff0c;res[5][3]表示子串hello和子串loo的最长公共子序列&#xff0c;为lo&#xff0…...

安卓Framework开发快速分析日志及定位源码

文章目录 如何区分源码中 main system events 日志查看 Activity 生命周期日志分析 events 日志在源码中位置应用进程ID助分析具体应用ProtoLog 动态开关日志如何快速定位相关流程的代码位置 本文首发地址 https://h89.cn/archives/285.html 最新更新地址 https://gitee.com/ch…...

数据结构算法之B树

一、绪论 1.1 数据结构的概念和作用 1.2 B树的起源和应用领域 二、B树的基本原理 2.1 B树的定义和特点 2.2 B树的结构和节点组成 2.3 B树的插入 2.4 B树的删除操作 三、B树的优势和应用 3.1 B树在数据库系统中的应用 3.2 B树在文件系统中的应用 3.3 B树在内存管理中…...

【图卷积网络】GCN基础原理简单python实现

基础原理讲解 应用路径 卷积网络最经典的就是CNN&#xff0c;其 可以提取图片中的有效信息&#xff0c;而生活中存在大量拓扑结构的数据。图卷积网络主要特点就是在于其输入数据是图结构数据&#xff0c;即 G ( V , E ) G(V,E) G(V,E)&#xff0c;其中V是节点&#xff0c;E是…...

【话题】AI是在帮助开发者还是取代他们

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 引言AI在代码生成中的应用AI在错误检测和自动化测试中的作用对开发者职业前景的影响技能需求的变化与适应策略结论文章推荐 引言 随着人工智能&#xff08;AI&#xff…...

精通Perl正则表达式修饰符:提升文本处理能力的艺术

Perl语言以其强大的文本处理能力而闻名&#xff0c;其中正则表达式是其核心特性之一。正则表达式本身非常强大&#xff0c;但Perl提供的修饰符&#xff08;Modifiers&#xff09;进一步扩展了正则表达式的灵活性和表达能力。本文将深入探讨Perl中正则表达式修饰符的使用&#x…...

【web前端HTML+CSS+JS】--- HTML学习笔记01

学习链接&#xff1a;黑马程序员pink老师前端入门教程&#xff0c;零基础必看的h5(html5)css3移动端前端视频教程_哔哩哔哩_bilibili 学习文档&#xff1a; Web 开发技术 | MDN (mozilla.org) 一、前后端工作流程 WEB模型&#xff1a;前端用于采集和展示信息&#xff0c;中…...

Go 语言入门(一)

Go Modules依赖包查找机制 下载的第三方的依赖存储在 $GOPATH/pkg/mod 下go install 生成的可执行文件存储在 $GOPATH/bin下依赖查找顺序&#xff1a; 工作目录$GOPATH/pkg/mod$GOPATH/src 一、Go语言基础 1.标识符与关键字 1.1 命名方式 ​ go变量、常量、自定义类型、包…...

爬虫笔记20——票星球抢票脚本的实现

以下内容仅供交流学习使用&#xff01;&#xff01;&#xff01; 思路分析 前面的爬虫笔记一步一步走过来我们的技术水平也有了较大的提升了&#xff0c;现在我们来进行一下票星球抢票实战项目&#xff0c;实现票星球的自动抢票。 我们打开票星球的移动端页面&#xff0c;分…...

DDR3(三)

目录 1 预取1.1 什么是预取1.2 预取有哪些好处1.3 结构框图1.4 总结 2 突发2.1 什么是突发2.2 突发与预取 本文讲解DDR中常见的两个术语&#xff1a;预取和突发&#xff0c;对这两个概念理解的关键在于地址线的低位是否参与译码&#xff0c;具体内容请继续往下看。 1 预取 1.1…...

JDK都出到20多了,你还不会使用JDK8的Stream流写代码吗?

目录 前言 Stream流 是什么&#xff1f; 为什么要用Steam流 常见stream流使用案例 映射 map() & 集合 collect() 单字段映射 多字段映射 映射为其他的对象 映射为 Map 去重 distinct() 过滤 filter() Stream流的其他方法 使用Stream流的弊端 前言 当你某天看…...

QT slots 函数

文章目录 概述小结 概述 在Qt中&#xff0c;slots 是一种特殊的成员函数&#xff0c;它们可以与对象发出的信号连接。当信号被触发时&#xff0c;连接的槽函数会被调用。 来个简单的示例吧&#xff0c;如下图&#xff1a; #include <QObject> #include <QDebug>…...

pycharm如何使用jupyter

目录 配置jupyter新建jupyter文件别人写的方法&#xff08;在pycharm种安装&#xff0c;在网页中使用&#xff09; pycharm专业版 配置jupyter 在pycharm终端启动一个conda虚拟环境&#xff0c;输入 conda install jupyter会有很多前置包需要安装&#xff1a; 新建jupyter…...

机器学习——无监督学习(k-means算法)

1、K-Means聚类算法 K表示超参数个数&#xff0c;如分成几个类别&#xff0c;K值就取多少。若无需求&#xff0c;可使用网格搜索找到最佳的K。 步骤&#xff1a; 1、随机设置K个特征空间内的点作为初始聚类中心&#xff1b; 2、对于其他每个点计算到K个中心的距离&#xff0c;…...

强化学习-6 DDPG、PPO、SAC算法

文章目录 1 DPG方法2 DDPG算法3 DDPG算法的优缺点4 TD3算法4.1 双Q网络4.2 延迟更新4.3 噪声正则 5 附15.1 Ornstein-Uhlenbeck (OU) 噪声5.1.1 定义5.1.2 特性5.1.3 直观理解5.1.4 数学性质5.1.5 代码示例5.1.6 总结 6 重要性采样7 PPO算法8 附28.1 重要性采样方差计算8.1.1 公…...

vue3实现多表头列表el-table,拖拽,鼠标滑轮滚动条优化

需求背景解决效果index.vue 需求背景 需要实现多表头列表的用户体验优化 解决效果 index.vue <!--/** * author: liuk * date: 2024-07-03 * describe:**** 多表头列表 */--> <template><el-table ref"tableRef" height"calc(100% - 80px)&qu…...

Micron近期发布了32Gb DDR5 DRAM

Micron Technology近期发布了一项内存技术的重大突破——一款32Gb DDR5 DRAM芯片&#xff0c;这项创新不仅将存储容量翻倍&#xff0c;还显著提升了针对人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&#xff09;、高性能计算&#xff08;HPC&#xff09;以及数…...

SQL Server时间转换

第一种&#xff1a;format --转化成年月日 select format( GETDATE(),yyyy-MM-dd) --转化年月日&#xff0c;时分秒&#xff0c;这里的HH指24小时的&#xff0c;hh是12小时的 select format( GETDATE(),yyyy-MM-dd HH:mm:ss) --转化成时分秒的&#xff0c;这里就不一样的&…...

kubernetes集群部署:node节点部署和CRI-O运行时安装(三)

关于CRI-O Kubernetes最初使用Docker作为默认的容器运行时。然而&#xff0c;随着Kubernetes的发展和OCI标准的确立&#xff0c;社区开始寻找更专门化的解决方案&#xff0c;以减少复杂性和提高性能。CRI-O的主要目标是提供一个轻量级的容器运行时&#xff0c;它可以直接运行O…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

Java中栈的多种实现类详解

Java中栈的多种实现类详解&#xff1a;Stack、LinkedList与ArrayDeque全方位对比 前言一、Stack类——Java最早的栈实现1.1 Stack类简介1.2 常用方法1.3 优缺点分析 二、LinkedList类——灵活的双端链表2.1 LinkedList类简介2.2 常用方法2.3 优缺点分析 三、ArrayDeque类——高…...