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

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

相关推荐
多客软件佳佳36 分钟前
校园交友系统的设计与实现(开源版+三端交付+搭建+售后)
小程序·前端框架·uni-app·开源·php·交友
zhouang7703771 小时前
uniapp+vue2 设置全局变量和全局方法 (兼容h5/微信小程序)
微信小程序·小程序·uni-app
王者鳜錸4 小时前
UNIAPP发布小程序调用讯飞在线语音合成+实时播报
uni-app
_处女座程序员的日常13 小时前
Rollup failed to resolve import “destr“ from ***/node_modules/pinia-plugin-pers
javascript·uni-app·vue
慢慢雨夜1 天前
uniapp打包华为,提示请提供64位版本软件包后再提交审核
uni-app
秋雨凉人心1 天前
uniapp 设置安全区域
前端·javascript·vue.js·uni-app
咸虾米_1 天前
uniCloud云对象调用第三方接口,根据IP获取用户归属地的免费API接口,亲测可用
网络·uni-app·unicloud
Jiaberrr1 天前
uniapp中使用原生ajax上传文件并携带其他数据,实时展示上传进度
前端·javascript·vue.js·ajax·uni-app
上趣工作室1 天前
uniapp中使用全局样式文件引入的三种方式
开发语言·rust·uni-app