1.1.0 • Published 2 years ago
qb-vuex v1.1.0
@qb/vuex
基于 Vuex 的响应式并持久化数据加密缓存,以及支持新建局部 Store 的响应式并持久化数据加密缓存
背景
对于全局数据状态的管理Vuex
,通常要针对页面的刷新,将数据做一份本地缓存,于此情况,本地缓存的操作情况也是繁多。在此,在保证项目支持store
数据响应式的前提下,本地加密持久化数据成了关键,于此,对 Vuex 的初始化集成了一个工具函数createVuexStore
,将操作停留在store
的commit/dispatch
方式上,无需再操作本地localstorage/sessionstorage
,同时写入数据进行了加密
智能提示
安装
Vue2.x 版本
安装依赖
npm install vuex secure-ls vuex-persistedstate -S
安装工具
npm install @qb/vuex -S
Vue3.x 版本
安装依赖
npm install vuex@next secure-ls vuex-persistedstate -S
安装工具
npm install @qb/vuex@next -S
API
createVuexStore
新建一个 Vuex-store, 支持响应式且默认数据本地持久化缓存(LocalStroage) createVuexStore(storeName, options)
参数说明
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
storeName | string | 否 | 仓库名称,存储到 localstroage 中的 key | |
options | object | 是 | 等同于 Vuex 的 StoreOptions |
示例代码
import { createVuexStore } from '@qb/vuex'
const store = createVuexStore('example-store', {
state: {
name: '',
address: {
city: '',
province: ''
}
},
mutations: {
/**
* 更新用户名称
* @param {*} state
* @param {*} value
*/
SET_NAME(state, value) {
state.name = value
},
/**
* 更新用户地址
* @param {*} state
* @param {*} data
*/
SET_ADDRESS(state, data) {
state.address = { ...state.address, ...data }
}
}
})
new Vue({
store,
render: h => h(App)
}).$mount('#app')
<template>
<div>
<h1>store : {{ $store.state.name }}</h1>
<h1>store : {{ $store.state.address }}</h1>
</div>
</template>
<script>
export default {
mounted() {
this.$store.commit('SET_NAME', '小明')
this.$store.commit('SET_ADDRESS', {
province: '广东省',
city: '广州市'
})
}
}
</script>
createReactiveStore
新建一个局部仓库 store,支持响应式,且可配置是否本地缓存方式以及是否加密 createReactiveStore(storeName, options)
参数说明
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
storeName | string | 否 | 仓库名称,存储到 localstroage 或 sessionStorage 中的 key | |
options | object | 是 | ReactiveOptions 对象 |
ReactiveOptions
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
cache | boolean | 否 | false | 是否开启缓存,默认不开启 |
encrypt | boolean | 否 | false | 是否开启加密 ,默认不开启 |
StorageMode | string | 否 | 'session' | 字符串枚举, local (存储到本地 localstroage) , session (存储到本地的 sessionStroage) |
state | object | 否 | { } | 数据状态管理对象 , 等同于 Vuex 的 StoreOptions 的 state |
mutations | object | 否 | null | 同步修改 state 函数集合 ,等同于 Vuex 的 StoreOptions 的 mutations |
actions | object | 否 | null | 异步修改 state 函数集合 ,等同于 Vuex 的 StoreOptions 的 actions |
示例代码
import { createReactiveStore } from '@qb/vuex'
const ReactiveStore = createReactiveStore('reactiveStore', {
cache: true,
storage: 'local',
encrypt: true,
state: {
name: '',
address: {
city: '',
province: ''
}
},
mutations: {
/**
* 更新用户名称
* @param {*} state
* @param {*} value
*/
SET_NAME(state, value) {
state.name = value
},
/**
* 更新用户地址
* @param {*} state
* @param {*} data
*/
SET_ADDRESS(state, data) {
state.address = { ...state.address, ...data }
}
},
actions: {
//模拟异步
ASYNC_SET_ADDRESS({ state, commit }, data) {
return new Promise(resolve => {
setTimeout(() => {
commit('SET_ADDRESS', data)
resolve(data)
}, 1000)
})
}
}
})
<template>
<div>
<h1>ReactiveStore : {{ name }}</h1>
<h1>ReactiveStore : {{ address }}</h1>
</div>
</template>
<script>
export default {
computed: {
name() {
return ReactiveStore.state.name
},
address() {
return ReactiveStore.state.address
}
},
mounted() {
ReactiveStore.commit('SET_NAME', '小明')
ReactiveStore.commit('SET_ADDRESS', {
province: '广东省',
city: '广州市'
})
}
}
</script>
异步模式
<script>
export default {
computed: {
name() {
return ReactiveStore.state.name
},
address() {
return ReactiveStore.state.address
}
},
async mounted() {
let res = await ReactiveStore.dispatch('ASYNC_SET_ADDRESS', {
province: '浙江省',
city: '杭州市'
})
console.log("ASYNC_SET_ADDRESS",res)
}
}
</script>
Vue3.x 版本注意事项
对于createReactiveStore
在 Vue3.x 版本中,返回的是一个 reactive 响应式对象,如果在setup
中使用时,需要借助toRefs
或者 computed
来维持其响应式, 且 toRefs
解构的是整个store
实例,而不是state
<template>
<div>
<h1>ReactiveStore : {{ userName }}</h1>
<h1>ReactiveStore : {{ state.address }}</h1>
</div>
</template>
<script lang="ts">
import { defineComponent, toRefs, computed } from 'vue'
export default defineComponent({
setup() {
const userName = computed(() => {
return ReactiveStore.state && ReactiveStore.state.name
})
onMounted(() => {
ReactiveStore.commit('SET_NAME', '小明')
ReactiveStore.commit('SET_ADDRESS', {
province: '湖南省',
city: '长沙市'
})
})
return {
userName,
...toRefs(ReactiveStore)
}
})
</script>
1.1.0
2 years ago