# unistorage

**Repository Path**: xy_zi/unistorage

## Basic Information

- **Project Name**: unistorage
- **Description**: 用于 uni-app 中的数据持久化
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-27
- **Last Updated**: 2022-07-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uniStorage

> uni-app

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

> Web

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

> 注意

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

# Vuex
## Keys
### Value Keys

```js
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

```js
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

```js
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

```js
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

```js
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

```js
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

```js
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',
	})
  ]
})
```

## SessionStorage
### session

```js
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',
    })
  ]
})
```


## Methods
### Mutations

```js
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

```js
import uniStorage from '@xyzi/unistorage'

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

# Vue2
## Ready

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

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

## Storage
### Object Storage

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

### Array Storage

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

### Function Storage

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

## Pages
### Multiple Page

* Page One

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

* Page Two

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

# Vue3
## Options API
### Ready

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

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

### Options
#### Reactive

```js
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

```js
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

```js
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

```js
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

```js
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

```js
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,
	}
}
```

# Pinia
## Ready

> 注意

* pinia暂时无法在uniapp中使用，以下以Web为例

```js
import {createPinia} from 'pinia'
import {useUniPinia} from '@xyzi/unistorage'

const store = createPinia()
store.use(useUniPinia)
```

## Storage
### Store Storage

```js
import {defineStore} from "pinia";

export default defineStore('counter',{
	state(){
		return {
			count: 0
		}
	},
	actions: {
		handler() {
			this.count++;
		}
	},
	uniStorage: true, //全部参数默认
})
```

### Keys
#### 省略

keys可省略，默认存储当前state

```js
import {defineStore} from "pinia";

export default defineStore('counter',{
	state(){
		return {
			count: 0
		}
	},
	actions: {
		handler() {
			this.count++;
		}
	},
	uniStorage: {
		namespace: "base"
	}
})
```

#### 不省略

```js
import {defineStore} from "pinia";

export default defineStore('counter',{
	state(){
		return {
			count: 0
		}
	},
	actions: {
		handler() {
			this.count++;
		}
	},
	uniStorage: {
		keys: ["count"],
		namespace: "base"		
	}
})
```

### namespace
#### 省略

namespace可省略，默认值为当前id

```js
import {defineStore} from "pinia";

export default defineStore('counter',{
	state(){
		return {
			count: 0
		}
	},
	actions: {
		handler() {
			this.count++;
		}
	},
	uniStorage: {
		keys: ["count"]
	}
})
```

#### 不省略

```js
import {defineStore} from "pinia";

export default defineStore('counter',{
	state(){
		return {
			count: 0
		}
	},
	actions: {
		handler() {
			this.count++;
		}
	},
	uniStorage: {
		keys: ["count"],
		namespace: "base"		
	}
})
```