需求:使用uniapp,模拟key(表名)增删改查对象数组,每个key可以单独操作,并模拟面对对象对应表,每个key对应的baseInstance 类似一个操作类,当然如果你场景比较简单,可以改为固定key或者传值key,调普通js而不需要new
base.js
- export default {
-
- data() {
- return {}
- },
-
-
- methods: {
-
- // 一是不需要new来调用,二是参数非常灵活,可以不传,也可以这么传
- createBaseStore(key) {
- return new this.baseInstance(key || {})
- },
- // 函数创建对象 每个key对应自己的方法 达到实例化效果 使用 baseInstance.addExt(obj) 自动携带固定key
- baseInstance(key) {
- this.dataKey = key;
-
- this.addExt = function addExt(obj) {
- var dataList = this.getAllExt()
- if (dataList == null) {
- dataList = new Array()
- }
- var newItemid = 0
- const last = dataList.length - 1
- if (last >= 0) {
- newItemid = dataList[last].id + 1
- }
- obj.id = newItemid
- dataList.push(obj)
- this.save(dataList)
- }
-
-
-
- this.removeExt = function removeExt(param) {
-
- var dataList = this.getAllExt();
- var findItemIndex = dataList.findIndex(item => {
- if (item.id == param) {
- return true
- }
- })
-
- if (findItemIndex >= 0) {
- const newList = dataList.splice(findItemIndex, 1)
- console.log("remove item is index", findItemIndex, JSON.stringify(newList))
- this.save(dataList)
- } else {
- console.log("not find remove param", param)
- }
-
- }
-
- this.changeExt = function changeExt() {
- console.log("change")
- }
-
- this.searchExt = function searchExt() {
- console.log("search")
- }
-
- this.save = function save(dataList) {
- var dataJson = JSON.stringify(dataList)
- uni.setStorage({
- key: key,
- data: dataJson,
- success: function() {
- console.log("key:", key, 'addExt success', dataJson);
- console.log('curr size', dataList.length);
- }
- });
-
- }
-
-
- this.getAllExt = function getAllExt() {
- try {
- const value = uni.getStorageSync(this.dataKey);
- if (!value) {
- console.log('getAllExt is empty');
- return null
- }
-
- const dataBean = JSON.parse(value)
- if (dataBean) {
- return dataBean
- }
- } catch (e) {
- console.log("showAllToLogExt error", e);
- }
-
- return null
- }
-
-
- this.showAllToLogExt = function showAllToLogExt() {
- try {
- const value = this.getAllExt();
- if (value) {
- console.log("showAllToLogExt", value);
- }
- } catch (e) {
- console.log("showAllToLogExt error", e);
- }
-
- }
-
- },
-
- clearAllExt() {
- console.log("clearAllExt")
- uni.clearStorage()
- }
-
- }
-
- }
vue使用
- <view>
- <view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
- <button type="default" v-on:click="showAllToLog()">showAllToLogbutton>
- <button type="default" v-on:click="add()">addbutton>
- <button type="default" v-on:click="remove()">removebutton>
- <button type="default" v-on:click="change()">changebutton>
- <button type="default" v-on:click="search()">searchbutton>
- <button type="default" v-on:click="clearAll()">clearAllbutton>
- view>
-
- view>
-
- <script>
- import base from "@/pages/base/base.js"
-
- export default {
- mixins: [base],
- data() {
- return {
- title: 'demo学习',
- TestBean: {
- id: 0,
- a: "",
- b: "",
- c: "",
- },
-
- dataExt: {},
- dataExt2: {},
- storeInstance1: this.createBaseStore("key111"),
- storeInstance2: this.createBaseStore("key222"),
- indexId: 0
- }
- },
- onload() {
- getAllExt()
- },
- methods: {
- showAllToLog() {
- this.storeInstance1.showAllToLogExt()
- this.storeInstance2.showAllToLogExt()
- },
- add() {
- // 操作类型1实例 ,存对象2到对象数组2
- var currentTime = new Date();
- this.dataExt.name = "111"
- this.dataExt.goodsTime = currentTime
- this.storeInstance1.addExt(this.dataExt)
- // key1Store.remove
- // key1Store. 等等操作
-
- // 操作类型2实例 ,存对象2到对象数组2
- this.dataExt2.name = "param2"
- this.dataExt2.param2Time = currentTime
- this.storeInstance2.addExt(this.dataExt2)
-
-
- },
- remove() {
- // 模拟后续加上id即可目前只是掩饰
- this.storeInstance1.removeExt(4)
- this.storeInstance2.removeExt(4)
- },
- change() {
- this.changeExt()
- },
- search() {
- this.searchExt()
- },
- clearAll() {
- this.clearAllExt()
- },
- }
- }
- script>
-
- <style>
-
- style>