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

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

相关推荐
初遇你时动了情4 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑0077 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字7 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔7 小时前
uniapp rpx兼容平板
uni-app
荔枝吖7 小时前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗7 小时前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo141610 小时前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app
赣州云智科技的技术铺子1 天前
uni app下开发AI运动小程序解决方案
uni-app·ai运动·ai运动识别·运动识别引擎·uni ai运动解决方案·ai运动会·ai体测
Random_index1 天前
#Uniapp篇:变量&v-if 和 v-show 区别&.sync 修饰符&宽屏适配指南&Pinia内置了
uni-app
江湖行骗老中医1 天前
uni-app 修改复选框checkbox选中后背景和字体颜色
开发语言·javascript·uni-app