uniApp使用uview对vuex的二次封装实现全局变量

1、uni-app目根目录新建’/store/index.js’,并复制如下内容到其中
2、uni-app目根目录新建’/store/ u . m i x i n . j s ′ ,并复制如下内容到其中,由于 H X 某些版本的限制,我们无法帮您自动引入 " u.mixin.js',并复制如下内容到其中,由于HX某些版本的限制,我们无法帮您自动引入" u.mixin.js,并复制如下内容到其中,由于HX某些版本的限制,我们无法帮您自动引入"u.mixin.js",您需要在main.js 中手动引入,并mixin处理
3、在项目根目录的main.js中,引入"/store/index.js",并放到Vue示例中

import store from '@/store';
let vuexStore = require("@/store/$u.mixin.js");
Vue.mixin(vuexStore);

// 引入uView对小程序分享的mixin封装
let mpShare = require('uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare);

// 将store放入Vue对象创建中
const app = new Vue({
	store,
	...App
})

4、使用

<template>
	<view>
		<view>
			版本号为:{{vuex_version}}
		</view>
		<view>
			<<琵琶行>>的作者为{{vuex_user.name}}
		</view>
		<u-button @click="modifyVuex">修改变量</u-button>
	</view>
</template>

<script>
	export default {
		methods: {
			modifyVuex() {
				this.$u.vuex('vuex_version', '1.0.1');
				// 修改对象的形式,中间用"."分隔
				this.$u.vuex('vuex_user.name', '诗圣');
			}
		}
	}
</script>

页面js中
在这里插入图片描述js文件中
在这里插入图片描述在这里插入图片描述

参考:
https://xuqu.gitee.io/guide/globalVariable.html
https://www.cnblogs.com/shimily/articles/15570984.html

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个使用 uview-ui 多列选择器组件进行二次封装的示例: ``` <template> <view> <u-popup v-model="showPicker" position="bottom" :overlay="true"> <view> <u-picker-view :value="selectedValues" @change="onPickerChange"> <u-picker-view-column v-for="(column, index) in columns" :key="index"> <view v-for="(item, i) in column" :key="i"> <u-checkbox v-model="item.checked"> {{ item.label }} </u-checkbox> </view> </u-picker-view-column> </u-picker-view> <u-button type="primary" @click="confirm">确定</u-button> </view> </u-popup> <u-input :value="selectedLabels.join(',')" @click="showPicker = true" disabled></u-input> </view> </template> <script> export default { props: { columns: { type: Array, default: () => [] } }, data() { return { showPicker: false, selectedValues: [], selectedLabels: [] } }, mounted() { this.initSelectedValues() }, methods: { initSelectedValues() { this.selectedValues = this.columns.map(column => { return column.findIndex(item => item.checked) }) this.updateSelectedLabels() }, onPickerChange(e) { this.selectedValues = e.detail.value this.updateSelectedLabels() }, updateSelectedLabels() { this.selectedLabels = this.selectedValues.map((value, index) => { return this.columns[index][value].label }) }, confirm() { this.showPicker = false this.$emit('change', this.selectedLabels) } } } </script> ``` 在这个示例中,我们使用了 u-popup、u-picker-view、u-picker-view-column 和 u-checkbox 组件来构建一个多列联动多选选择器。它接收一个 columns 数组作为参数,每个元素代表一列数据,每个元素包含 label 和 checked 两个属性,分别表示选项的文本和是否被选中。通过 u-checkbox 组件来实现多选功能。 组件内部使用了 selectedValues 数组来存储每列选中的值的索引,使用 selectedLabels 数组来存储每列选中的值的文本。在初始化和选择变化时,通过 updateSelectedLabels 方法来更新 selectedLabels 数组。在点击确定按钮时,通过 emit 方法将选中的值传递给父组件。 这是一个简单的示例,你可以根据自己的业务需求进行修改和扩展。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值