uniStorage

uni-app

• uni-app 中 Vuex 插件用于数据持久化。
• 实例data数据持久化

Web

• Vue 中 Vuex 插件用于数据持久化。
• 实例data数据持久化

注意

• 受限于uni-app和Vue的生命周期差异、keep-alive等因素，请谨慎使用同名 namespace

uni-app

Vuex Example

Keys

Value Keys

import uniStorage from '@xyzi/unistorage'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    handler(state) {
		state.count++
    }
  },
  plugins: [
    uniStorage({
      keys: ['count'],
      namespace: 'base',
    })
  ]
})

Object Value Keys

import uniStorage from '@xyzi/unistorage'

const store = new Vuex.Store({
  state: {
    obj: {
		count: 0,
	}
  },
  mutations: {
    handler(state) {
      state.obj.count++
    }
  },
  plugins: [
    uniStorage({
      keys: ['obj.count'],
      namespace: 'base',
    })
  ]
})

Object Keys

import uniStorage from '@xyzi/unistorage'

const store = new Vuex.Store({
  state: {
    obj: {
		count: 0,
	}
  },
  mutations: {
    handler(state) {
      state.obj.count++
    }
  },
  plugins: [
    uniStorage({
      keys: ['obj'],
      namespace: 'base',
    })
  ]
})

Array Keys

import uniStorage from '@xyzi/unistorage'

const store = new Vuex.Store({
  state: {
	arr: [{
		count: 0,
		name: "Tom"
	}]
  },
  mutations: {
    handler(state) {
      state.arr[0].count++
    }
  },
  plugins: [
    uniStorage({
      keys: ['arr[0].count'],
      namespace: 'base',
    })
  ]
})

Modules Keys

import uniStorage from '@xyzi/unistorage'

const store = new Vuex.Store({
	state: {},
	mutations: {},
	actions: {},
	modules: {
		other: {
			namespaced: true,
			state: {
				count: 0,
			},
			mutations: {
				handler(state) {
					state.count++;
				}
			},
		}
	},
	plugins: [
		uniStorage({
			keys: ["other.count"],
			namespace: "base"
		})
	]
})

Multiple Keys

import uniStorage from '@xyzi/unistorage'

const store = new Vuex.Store({
  state: {
    count: 0,
	obj: {
		count: 0,
	}
  },
  mutations: {
    handler(state) {
      state.count++
    }
  },
  plugins: [
    uniStorage({
      keys: ['count','obj.count'],
      namespace: 'base',
    })
  ]
})

Storage

Multiple Storage

import uniStorage from '@xyzi/unistorage'

const store = new Vuex.Store({
  state: {
    count: 0,
	obj: {
		count: 0,
	}
  },
  mutations: {
    handler(state) {
      state.count++
    }
  },
  plugins: [
    uniStorage({
      keys: ['count'],
      namespace: 'base',
    }),
	uniStorage({
	  keys: ['obj.count'],
	  namespace: 'other',
	})
  ]
})

Methods

Mutations

import uniStorage from '@xyzi/unistorage'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    handler(state) {
      state.count++
    }
  },
  plugins: [
    uniStorage({
      keys: ['count'],
      namespace: 'base',
    })
  ]
})

Actions

import uniStorage from '@xyzi/unistorage'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  actions:{
	handler({state}){
		state.count++
	}  
  },
  plugins: [
    uniStorage({
      keys: ['count'],
      namespace: 'base',
    })
  ]
})

VM Example

Ready

//main.js
//....
import uniStorage from "@xyzi/unistorage"

//...
Vue.use(uniStorage);
//...

Storage

Object Storage

export default {
	data() {
		return {
			count: 0,
		}
	},
	methods: {
		handler() {
			this.count++;
		}
	},
	uniStorage: {
		keys: ["count"],
		namespace: "base"
	}
}

Array Storage

export default {
	data() {
		return {
			count: 0,
		}
	},
	methods: {
		handler() {
			this.count++;
		}
	},
	uniStorage: [{
		keys: ["count"],
		namespace: "base"
	}]
}

Function Storage

export default {
	data() {
		return {
			count: 0,
		}
	},
	methods: {
		handler() {
			this.count++;
		}
	},
	uniStorage() {
		return {
			keys: ["count"],
			namespace: "base"
		};
	}
}

Pages

Multiple Page

• Page One

export default {
	data() {
		return {
			count: 0,
		}
	},
	methods: {
		handler() {
			this.count++;
		}
	},
	uniStorage() {
		return {
			keys: ["count"],
			namespace: "base"
		};
	}
}

• Page Two

export default {
	data() {
		return {
			count: 0,
		}
	},
	methods: {
		handler() {
			this.count++;
		}
	},
	uniStorage: {
		keys: ["count"],
		namespace: "base"
	},
}

Web

Vuex Example

SessionStorage

session

import uniStorage from '@xyzi/unistorage'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    handler(state) {
      state.count++
    }
  },
  plugins: [
    uniStorage({
      keys: ['count'],
	  session: true,
      namespace: 'base',
    })
  ]
})

Vue3

Options API

Ready

//main.js
//....
import uniStorage from "@xyzi/unistorage"

//...
app.use(uniStorage);
//...

Options

Reactive

import {reactive} from "vue";
export default {
	setup() {
		const obj = reactive({
			count: 0
		});
		const handler = function() {
			obj.count++;
		}
		return {
			obj,
			handler,
		}
	},
	uniStorage: {
		keys: ['obj.count'],
		namespace: "base"
	}
}

Ref

import {ref} from "vue";
export default {
	setup() {
		const count = ref(0);
		const handler = function() {
			count.value++;
		}
		return {
			count,
			handler,
		}
	},
	uniStorage: {
		keys: ['count'],
		namespace: "base"
	}
}

Composition API

Reactive

Proxy Data

import {reactive} from "vue";
import {useUniStorage} from "@xyzi/unistorage";
export default {
	setup() {
		const state = reactive({count: 0,})
		const handler = function() {state.count++;}
		useUniStorage({
			data: state,
			keys: ['count'],
			namespace: "base"
		})
		return {
			state,
			handler,
		}
	},
}

Ref Data

import {ref,} from "vue";
import {useUniStorage} from "@xyzi/unistorage";
export default {
	setup() {
		const count = ref(0);
		const handler = function() {count.value++;}
		useUniStorage({
			data: count,
			keys: ['value'],
			namespace: "base"
		})
		return {
			count,
			handler,
		}
	}
}

Multiple Data

import {ref,reactive,} from "vue";
import {useUniStorage} from "@xyzi/unistorage";
export default {
	setup() {
		const count = ref(0);
		const state = reactive({count: 0})
		const handler = function() {
			state.count++;
			count.value++;
		}
		useUniStorage({
			data: {
				state,
				count
			},
			keys: ['state.count', 'count'],
			namespace: "base"
		})
		return {
			state,
			count,
			handler,
		}
	}
}

Hook Data

import {reactive} from "vue";
import {useUniStorage} from "@xyzi/unistorage";

export default function(){
	const state = reactive({count: 0,})
	const handler = function() {state.count++;}
	useUniStorage({
		data: state,
		keys: ['count'],
		namespace: "base"
	})
	return {
		state,
		handler,
	}
}