uniapp 如何使用vuex store (亲测)

news2024/11/14 1:53:29

首先是安装:

npm install vuex@next --save

安装之后,Vue2 这样写

不管在哪里,建立一个JS文件,假设命名:store.js

代码这样写:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
	  battery: {}
	  
	  	
	  

  }, 
  mutations: {
	  SET_BATTERY_INFO(state, info) {
	  	state.battery = info;
	  }
	 
  },
   getters : {
  	getBatteryInfo: state => state.battery,
	
   },
  actions: {},
 
})

export default store

这里面的SET方法,自己去改成自己的哈

然后在main.js中这样写:

import store from 'request/store/store.js'
Vue.prototype.$store = store

const app = new Vue({
  ...App,
  store
})
app.$mount()

然后在其他JS文件中这样使用:

import store from './store/store' //需要先导入

store.commit('SET_CHASSIS_INFO', message)//使用store就可以进行访问变量

在其他的vue界面这样用:

首先写你需要的变量

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

然后在页面中这样写:

<view class="bottomtext">{{battery.args.soc}}%</view>

我这个battery是一个对象

在方法中这样使用:

this.$store.state.battery

有不对的,希望大家指正,共同进步!

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

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

相关文章

[Docker#8] 容器配置 | Mysql | Redis | C++ | 资源控制 | 命令对比

目录 一&#xff1a;Mysql 容器化安装 二&#xff1a;Redis 容器化安装 Redis 简介 Redis 容器创建 三&#xff1a;C容器制作 四&#xff1a;容器资源更新 常见问题 一&#xff1a;Mysql 容器化安装 进入 mysql 的镜像网站&#xff0c;查找 mysql 的镜像 mysql docker…

泷羽sec学习打卡-Linux基础

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 关于Linux的那些事儿-Base 一、Linux-Base什么时openssl&#xff1f;有哪些加密参数&#xff1f;常用lin…

SpringBoot后端解决跨域问题

1.全局方式 新建一个conifg配置类&#xff0c;内容如下&#xff1a; Configuration public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")//是否发送Cookie.allowCrede…

odoo17 owl 前端 顶部导航栏右侧添加自定义按钮

odoo17 前端 顶部导航栏右侧添加自定义按钮 先看图 很多时候都想要在这添加个自定义按钮或图标, 无穷下手添加 这里将展示如何在顶部header添加自定义 添加自定义模块 demo 目录结构如下 └─demo│ __init__.py│ __manifest__.py│├─static│ └─src│ ├─s…

Power bi中的lookupvalue函数

lookupvalue函数是一个非常实用的函数&#xff0c;它可用于在两个表之间查找相应的值。kagkupMalue函数可以将一个表中的列值作为参数传递给另一个表中的列&#xff0c;并返回在第二个表中与该值匹配的另一个列的值。在实践中&#xff0c;lookupvalue函数通常用于两个表之间的关…

golang分布式缓存项目 Day5 分布式节点

该项目原作者&#xff1a;https://geektutu.com/post/geecache-day1.html。本文旨在记录本人做该项目时的一些疑惑解答以及部分的测试样例以便于本人复习 1 流程回顾注&#xff1a; 我们在GeeCache 第二天 中描述了 geecache 的流程。在这之前已经实现了流程 ⑴ 和 ⑶&#xf…

[产品管理-76]:延续是创新与颠覆式创新的比较

目录 一、概述 1、定义与特征 2、市场影响与竞争策略 3、实施难度与风险 4、案例分析 二、示例 1. 延续性创新示例 2. 创新示例 3. 颠覆式创新示例 一、概述 延续性创新与颠覆式创新是技术创新领域的两种重要策略&#xff0c;它们在多个方面存在显著差异。 以下是对…

【 AI写作鹅-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

AI:重塑电商行业的创新引擎,开启电商数字化转型新征程

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

语义分割数据增强,图像和标签同步对应详细增强教程(附代码)

&#x1f4aa; 专业从事且热爱图像处理&#xff0c;图像处理专栏更新如下&#x1f447;&#xff1a; &#x1f4dd;《图像去噪》 &#x1f4dd;《超分辨率重建》 &#x1f4dd;《语义分割》 &#x1f4dd;《风格迁移》 &#x1f4dd;《目标检测》 &#x1f4dd;《图像增强》 &a…

pgsql和mysql的自增主键差异

1. 当有历史数据存在时&#xff0c; mysql的自增主键是默认从最大值自增。 pgsql的自增主键取初始值开始逐个尝试&#xff0c;所以存在可能与历史数据的主键重复的情况。 pgsql解决上述问题的方式&#xff1a;重设自增值。 SELECT SETVAL(t_db_filed_id_seq, (SELECT MAX(&q…

Spring Cloud Contract快速入门Demo

1.什么是Spring Cloud Contract &#xff1f; Spring Cloud Contract 是 Spring 提供的一套工具&#xff0c;用于帮助开发者通过契约&#xff08;Contract&#xff09;驱动的方式进行微服务的测试和集成。它主要解决微服务之间通信时&#xff0c;如何确保服务提供者和消费者之…

OceanBase JDBC (Java数据库连接)的概念、分类与兼容性

本章将介绍 OceanBase JDBC的 概念与分类&#xff0c;已帮助使用 JDBC 的用户及技术人员更好的 了解JDBC&#xff0c;以及 OceanBase JDBC在与 MySQL 及 Oracle 兼容性方面的相关能力。 一、JDBC 基础 1.1 JDBC 的概念 JDBC 一般指 Java 数据库连接。Java 数据库连接&#xf…

自定义springCloudLoadbalancer简述

概述 目前后端用的基本都是springCloud体系&#xff1b; 平时在dev环境开发时&#xff0c;会把自己的本地服务也注册上去&#xff0c;但是这样的话&#xff0c;在客户端调用时请求可能会打到自己本地&#xff0c;对客户端测试不太友好. 思路大致就是前端在请求头传入指定ip&a…

Go/Golang语言各种数据类型内存字节占用大小和最小值最大值

具体请前往&#xff1a;Go/golang语言基本数据类型字节大小和取值范围(最小值~最大值)

力扣104 : 二叉树最大深度

补&#xff1a;二叉树的最大深度 描述&#xff1a; 给定一个二叉树 root &#xff0c;返回其最大深度。二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 何解&#xff1f; 树一般常用递归&#xff1a;递到叶子节点开始倒着处理

Android GPU纹理数据拷贝

在 Android 开发中读取纹理数据有以下几种方法&#xff1a; glReadPixelsImageReaderPBO&#xff08;Pixel BufferObject&#xff09; HardwareBuffer 1. glReadPixels glReadPixels 是 OpenGL ES 的 API&#xff0c;通常用于从帧缓冲区中读取像素数据&#xff0c;OpenGL ES…

畅捷通T+ RecoverPassword.aspx

用友 畅捷通T RecoverPassword.aspx 存在未授权管理员密码修改漏洞&#xff0c;攻击者可以通过漏洞修改管理员账号密码登录后台 #漏洞影响版本 12.0&#xff0c;12.1.12.2.12.3 13.0 15.0 16.0 18.0 补丁号291都影响 19.0 补丁号167之前也有影响 对于老版本畅捷通已经…

最全最简单理解迭代器

1. 迭代器的基础概念(iterator) 1.1 本质 迭代器能够用来遍历容器的对象,与能够遍历数组的指针类似,是广义指针。 1.2 作用: 能够让迭代器与算法不干扰的相互发展,最后又能无间隙的粘合起来。重载了*,++,==,!=,=运算符。用以操作复杂的数据结构。容器提供迭代…

python数据写入excel文件

主要思路&#xff1a;数据 转DataFrame后写入excel文件 一、数据格式为字典形式1 k e &#xff0c; v [‘1’, ‘e’, 0.83, 437, 0.6, 0.8, 0.9, ‘好’] 1、这种方法使用了 from_dict 方法&#xff0c;指定了 orient‘index’ 表示使用字典的键作为行索引&#xff0c;然…