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

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()

特别注意!!!!!!!!

!!!!!!!!!!!!

!!!!!!!!

在nvue界面的 css 样式中,不要有  @dclound 等样式,这个是uniapp 的,会报错,困扰了很久,才测试出来的,希望大家注意

如果在nvue中使用store,写法有区别,需要在  main.js  这样写

import store from 'request/store/store.js'
Vue.prototype.$store = store
uni.$store = store  //需要加上这个

如果有nvue使用store.js文件,或者间接使用了store.js

那么在使用的时候,都需要这样使用:

this.$store  修改成  uni.$store

而且在nvue页面中,不能直接在页面中使用


<text >当前正在操作:{{uni.$store.对象}}</text>

需要设置一个变量,在data中让uni.$store进行赋值,才可以

否则会报 错误   resportJS>>。。。。 

然后在其他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.kler.cn/a/395279.html

相关文章:

  • Taro React-Native IOS 打包发布
  • Qt主线程把数据发给子线程,主线程会阻塞吗
  • ubuntu22.04 安装FFmpeg,并进行视频的转化格式和裁剪
  • 为什么海外服务器IP会被封
  • 提高数据处理效率:JavaScript 操作 XLSX 文件的最佳实践
  • python——面向对象
  • 游戏引擎学习第二天
  • 深入理解 Spring Boot 中的 Starters
  • vue3+ant design vue实现日期等选择器点击右上角叉号默认将值变为null,此时会影响查询等操作~
  • 【C++】隐含的“This指针“
  • GIT将源码推送新分支
  • 第十四章 Spring之假如让你来写AOP——雏形篇
  • 二分查找--快速地将搜索空间减半
  • 大语言模型在序列推荐中的应用
  • MinIo在Ubantu和Java中的整合
  • 某军工变压器企业:通过集团级工业IOT平台,实现数字化转型
  • yakit远程连接(引擎部署在vps上)
  • PyAEDT:Ansys Electronics Desktop API 简介
  • Apache Doris:快速入门与实践
  • word转markdown的方法(pandoc)
  • 2024 年 10 月公链行业研报:比特币引领市场,Layer 2 竞争加剧
  • 如何在Mac上切换到JDK 17开发环境
  • windows C#-创建记录类型(上)
  • 高性能分布式缓存Redis-分布式锁与布隆过滤器
  • Python →爬虫实践
  • 如何在CentOS 7上搭建SMB服务