uniapp 如何使用vuex store (亲测)

首先是安装:

复制代码
npm install vuex@next --save

安装之后,Vue2 这样写

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

代码这样写:

javascript 复制代码
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中这样写:

javascript 复制代码
import store from 'request/store/store.js'
Vue.prototype.$store = store

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

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

javascript 复制代码
import store from './store/store' //需要先导入

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

在其他的vue界面这样用:

首先写你需要的变量

javascript 复制代码
computed:{
			...mapState(['battery'])
		},

然后在页面中这样写:

javascript 复制代码
<view class="bottomtext">{{battery.args.soc}}%</view>

我这个battery是一个对象

在方法中这样使用:

javascript 复制代码
this.$store.state.battery

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

相关推荐
Aress"19 小时前
uniapp设置vuex公共值状态管理
javascript·vue.js·uni-app
song85460113419 小时前
uniapp如何集成第三方库
开发语言·uni-app
东芃939419 小时前
uniapp上传blob对象到后台
前端·javascript·uni-app
Aress"21 小时前
uniapp 生成二维码图片[APP+H5+小程序等 全端适配]
小程序·uni-app
2501_915921431 天前
iOS 26 描述文件管理与开发环境配置 多工具协作的实战指南
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915909061 天前
iOS 抓包实战 从原理到复现、定位与真机取证全流程
android·ios·小程序·https·uni-app·iphone·webview
2501_915106321 天前
HBuilder 上架 iOS 应用全流程指南:从云打包到开心上架(Appuploader)上传的跨平台发布实践
android·ios·小程序·https·uni-app·iphone·webview
2501_916007471 天前
免费iOS加固方案指南
android·macos·ios·小程序·uni-app·cocoa·iphone
xuelong-ming1 天前
uniapp vue3 点击跳转外部网页
vue.js·uni-app
一路向前的月光2 天前
uniapp(2)自定义tabbar
uni-app