当前位置: 首页 > 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…...

逆向工程必备:用aardio和Sunny中间件抓取手机App封包的3种实战姿势

逆向工程实战&#xff1a;aardio与Sunny中间件的移动端封包拦截艺术 在移动应用安全研究领域&#xff0c;封包拦截与分析是理解应用通信逻辑的关键入口。不同于传统的PC端抓包&#xff0c;移动环境面临着证书绑定、代理检测等更复杂的防御机制。aardio配合Sunny中间件构建的轻量…...

ApiPost实战指南:从接口创建到自动化测试的全流程解析

1. 从零开始创建你的第一个API接口 作为一个常年和API打交道的开发者&#xff0c;我深知新手第一次接触接口工具时的迷茫。ApiPost作为一款国产的API开发工具&#xff0c;用起来确实比Postman更顺手&#xff0c;特别是对中文用户特别友好。下面我就带你一步步创建第一个接口&am…...

2026考公全攻略:在校生如何选岗、如何备考、如何上岸一次讲清

很多在校生最近都在问&#xff1a;现在开始准备公务员考试&#xff0c;还来得及吗先说结论&#xff1a;来得及&#xff0c;但前提是你要走对路径这几年考公环境已经发生明显变化报考人数持续增加岗位信息越来越透明单纯刷题已经不再有效考公正在从拼努力&#xff0c;变成拼策略…...

零基础一键配置黑苹果:OpCore-Simplify智能工具让复杂变简单

零基础一键配置黑苹果&#xff1a;OpCore-Simplify智能工具让复杂变简单 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为黑苹果配置时面对满屏代…...

H3六边形层次化地理空间索引:重新定义空间数据处理的颠覆式突破

H3六边形层次化地理空间索引&#xff1a;重新定义空间数据处理的颠覆式突破 【免费下载链接】h3 Hexagonal hierarchical geospatial indexing system 项目地址: https://gitcode.com/gh_mirrors/h3/h3 地理空间数据处理长期面临着精度与效率难以兼顾的困境。传统网格系…...

Nuxt4 官网访问来源统计的实现

今天我遇到一个值得记录的问题&#xff0c;场景是这样的&#xff1a;官网后台需要做访问统计&#xff0c;我得把访问来源和访问目标的 URL 传递给后端。绕了好一阵子&#xff0c;才终于理清楚。 项目结构上&#xff0c;Nuxt 4 负责官网展示&#xff0c;后端是 Java 服务。核心…...

基于MATLAB的数字图像处理系统:预处理、特征提取与语义分割全流程实现

数字图像处理系统&#xff08;基于matlab&#xff09; 此系统包括预处理&#xff0c;特征提取&#xff0c;语义分割 使用机器学习算法knn和svm 预处理包括线性灰度级变化&#xff0c;指数灰度级变化&#xff0c;直方图均衡化&#xff0c;高斯滤波&#xff0c;中值滤波&#xff…...

Django REST framework的应用场景

目录一、鉴权开发框架介绍二、Django REST framework是什么三、如何实现认证、权限与限流功能四、Django REST framework的应用场景一、鉴权开发框架介绍 鉴权开发框架是一种用于实现身份验证和授权的软件开发工具。它可以帮助开发者快速构建安全、可靠的身份验证和授权系统&a…...

设计师必看:Photoshop混合模式实战指南,5分钟搞定光影合成与氛围感调色

Photoshop混合模式实战指南&#xff1a;5分钟掌握光影合成与氛围调色 当你在深夜赶稿时&#xff0c;突然发现人物照片缺乏立体感&#xff0c;或是产品静物图需要增强戏剧性光影——这就是混合模式大显身手的时刻。不同于繁琐的曲线调整和复杂的蒙版操作&#xff0c;混合模式就像…...

大量文件夹能一键改名吗?怎么改?4个干货技巧教你快速搞定

每次整理电脑文件时&#xff0c;面对成百上千个命名混乱的文件夹&#xff0c;手动逐个修改不仅耗时费力&#xff0c;还容易出现重复或格式错误。本文汇总了4种实用的批量重命名方法&#xff0c;从简单的系统自带功能到专业软件、插件工具&#xff0c;再到进阶的批处理脚本&…...