Nuxt3 state store with webstorage(localstorage, sessionstorage) for persistent state
npm install nuxt3-store
npm i nuxt-vuex-localstorage
`
`js
// nuxt.config.js/ts
export default {
modules: ['nuxt3-store']
}
`
Usage
You can make store state with Nuxt3 config option array
`js
// nuxt.config.js/ts
export default {
modules: ['nuxt3-store'],
stores: [
'storename', // w/o persistence. state value is {}
{
name: 'storename2', // storage key name
type: 'localstorage', // webstorage type for persistent mode. if not entered, any webstorage will not be used. localstorage|sessionstorage
value: { // default value is {}
test: 'hello'
},
reactiveType: 'reactive', // if not entered, reactive is the default. reactive|readonly|shallowReactive|shallowReadonly
expiresIn: 1000, // expire time ms. if not entered, the persistent state is permanent
version: '1.0.0' // state store version. if the set version and persisted version are different, the state will be reset to default value when the page is loaded
}
]
}
// module options
export default {
...
version: '1.0.0', // you can set this version option for the default status version of every state store
modules: [['nuxt3-store', {
expiresIn: 1000, // expire time ms. if not entered, the persistent state is permanent
version: '1.0.0' // if not entered, config version option is set here
}]],
...
}
`
`html
{{$storename}}
{{$storename2}}
`
`js
// ./composables/composablemethod.js
import { useNuxtApp } from '#app'
const method = () => {
const { $storename } = useNuxtApp()
...
/ function with store state /
...
}
export default method
`
Composable States
You can make composable state with nuxt composables directory usage
`js
// ./composables/storename.js
import { store } from 'nuxt3-store'
export default store({ name: 'storename', type: 'localstorage', value: { test: 'hello' }, reactiveType: 'reactive', version: '1.0.0', expiresIn: 1000 })
`
`js
// ./composables/storename2.js
import { store } from 'nuxt3-store'
let storename2 = store()
storename2.test = 'hello world'
export default storename2
`
`html
{{store}}
{{store2}}
``