uniapp 如何使用vuex store (亲测)

首先是安装:

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

服务器数据恢复—分区结构被破坏的reiserfs文件系统数据恢复案例

服务器数据恢复环境&#xff1a; 一台服务器中有一组由4块SAS硬盘组建的RAID5阵列&#xff0c;上层安装linux操作系统统。分区结构&#xff1a;boot分区LVM卷swap分区&#xff08;按照顺序&#xff09;&#xff0c;LVM卷中划分了一个reiserfs文件系统作为根分区。 服务器故障…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于稳态信息和条件分布自适应的风电场阻抗智能辨识和稳定性评估》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

vue反向代理配置及宝塔配置

vue生产环境和开发环境 反向代理 正向代理 宝塔面板配置 本地小皮面板---NginxApache解决方案_小皮面板反向代理-CSDN博客 上面这个链接供大家参考&#xff0c;我这里面提取vue配置反向代理格式 在vite.config.js页面写入 server: {proxy: {"/api": {target: "…

【NOIP普及组】统计单词数

【NOIP普及组】统计单词数 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 一般的文本编辑器都有查找单词的功能&#xff0c;该功能可以快速定位特定单词在文章中的位置&#xff0c;有的还能统计出特定单词在文章中出现的次数。 现在&#x…

uni-app中使用 unicloud 云开发平台③

文章目录 六、hbuilderX 中使用 unicloud 云开发平台文档传统业务开发流程什么是 unicloudunicloud 优点开发流程uncloud 构成云数据库云存储及 CDN创建云函数工程七、unicloud api 操作云函数调用云函数实现云数据库基本增删改查1. 获取数据库引用云存储操作六、hbuilderX 中使…

STM32 极速入门第一天 点亮一个LED( 使用PlatformIO开发STM32单片机 ) 2024/11/11

什么是STM32? STM32是STMicroelectronics&#xff08;意法半导体&#xff09;推出的一系列基于ARM Cortex-M内核的32位Flash微控制器。它们因高性能、低功耗、易于编程和广泛的外设集成而广泛应用于各种嵌入式系统项目中。 使用设备: STM32F103C6T6 我的 keil 装的是 C51 所以…

微信小程序使用阿里巴巴矢量图标库正确姿势

1、打开官网&#xff1a;https://www.iconfont.cn/&#xff0c;把整理好的图标下载解压。 2、由于微信小程序不支持直接在wxss中引入.ttf/.woff/.woff2&#xff08;在开发工具生效&#xff0c;手机不生效&#xff09;。我们需要对下载的文件进一步处理。 eot&#xff1a;IE系列…

kafka面试题解答(四)

5、消费者组和分区数之间的关系是怎样的&#xff1f; 消费者组数小于等于分区数&#xff0c;消费者组内每个消费者负责消费不同分区的数据&#xff0c;一个分区只能由一个组内消费者消费。 6、kafka如何知道哪个消费者消费哪个分区&#xff1f; 生产者把数据发送给各个分区&…

Android Profiler 内存分析

Android studio&#xff08;下面简称AS&#xff09;为App提供的性能分析工具&#xff0c;在AS3.0替换掉旧的分析工具&#xff0c;对于其使用方法&#xff0c;官方也有对应的介绍&#xff1a;Android Profiler 对于使用方法&#xff0c;我只用到比较简单的功能&#xff0c;高级的…

DXF-模型空间和图纸空间、图层冷冻标志位

‌DXF文件中操作环境的标志码是组代码67 CAD-模型空间和图纸空间-是CAD中两种不同的操作环境 模型空间主要用于建模&#xff0c;是一个没有界限的三维空间&#xff0c;用户在这个空间中以任意尺寸绘制图形&#xff0c;通常按照1&#xff1a;1的比例&#xff0c;以实际尺寸绘制…

前端开发调试之 PC 端调试

以下内容来自稀土掘金青训营课程 bug 与 debug 点击.cls开启动态修改元素的class输入字符串可以动态的给元素添加类名勾选/取消类名可以动态的查看类名生效效果点击具体的样式值&#xff08;字号、颜色、宽度高度等&#xff09;可以进行编辑&#xff0c;浏览器内容区域实时预览…

Spring Boot集成SQL Server快速入门Demo

1.什么是SQL Server&#xff1f; SQL Server是由Microsoft开发和推广的以客户/服务器&#xff08;c/s&#xff09;模式访问、使用Transact-SQL语言的关系数据库管理系统&#xff08;DBMS&#xff09;&#xff0c;它最初是由Microsoft、Sybase和Ashton-Tate三家公司共同开发的&…

Self-RAG讲解

Self-RAG Self-RAG 概述 Self-RAG&#xff08;Self-Reflective Retrieval-Augmented Generation&#xff09;是一种增强型的RAG&#xff08;检索增强生成&#xff09;策略&#xff0c;结合了自我反思和自我评分机制&#xff0c;以提高检索文档和生成内容的质量。通过对检索到…

设计一致性的关键:掌握 Axure 母版使用技巧

设计一致性的关键&#xff1a;掌握 Axure 母版使用技巧 前言 在快节奏的产品开发周期中&#xff0c;设计师们一直在寻找能够提升工作效率和保持设计一致性的方法。 Axure RP&#xff0c;作为一款强大的原型设计工具&#xff0c;其母版功能为设计师们提供了一个强大的解决方案…

uniapp框架配置项pages.json

uniapp框架配置项pages.json pages.json 文件用来对 uni-app 进行全局配置&#xff0c;决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 globalStyle 全局配置 用于设置应用的状态栏、导航条、标题、窗口背景色等。下面配置项默认应用于每个页面。 注意…

蓝桥杯c++算法学习【1】之枚举与模拟(卡片、回文日期、赢球票、既约分数:::非常典型的比刷例题!!!)

重发一下&#xff0c;之前得排版有问题&#xff0c;而且另外加了一道题。。 别忘了请点个赞收藏关注支持一下博主喵&#xff01;&#xff01;&#xff01; 关注博主&#xff0c;更多蓝桥杯nice题目静待更新:) 枚举与模拟 一、卡片&#xff1a; 【问题描述】 小蓝有很多数字…

Java 基于 SpringBoot+Vue 的社区智慧养老系统(V3.0)

大家好&#xff0c;我是Java徐师兄&#xff0c;今天为大家带来的是Java 基于 SpringBootVue 的社区智慧养老系统&#xff08;V3.0&#xff09;。该系统采用 Java 语言开发&#xff0c;SpringBoot 框架&#xff0c;MySql 作为数据库&#xff0c;系统功能完善 &#xff0c;实用性…

el-table 纵向垂直表头处理

项目中表格展示会遇到需要纵向垂直表头情况&#xff0c;下面&#xff0c;我们基于el-table组件来实现这种表格。 以下是这次需要用到的数据表格&#xff0c;已知左侧违章名称是固定的&#xff0c;而月份是不固定的&#xff0c;在后端返回数据格式已确定的情况下&#xff0c;需…

caozha-CEPCS(新冠肺炎疫情防控系统)

caozha-CEPCS&#xff0c;是一个基于PHP开发的新冠肺炎疫情防控系统&#xff0c;CEPCS&#xff08;全称&#xff1a;COVID-19 Epidemic Prevention and Control System&#xff09;&#xff0c;可以应用于单位、企业、学校、工业园区、村落等等。小小系统&#xff0c;希望能为大…

新手如何快速搭建一个Springboot项目

新手如何快速搭建一个Springboot项目 一、开发环境准备后端其他工具 二、创建后端项目三、定义HelloController.hello()方法&#xff0c;返回“Hello Springboot” 一、开发环境准备 后端 1.安装 JDK&#xff1a;确保你的系统中安装了合适版本的 JDK&#xff0c;Spring Boot …