SecureLS about pinia-plugin-persistedstate

[prazdevs]

Hi, you just need to reimplement a storage (getItem and getItem ) using secure-ls 'API.
I made it work with the following config:

import { defineStore } from 'pinia'
import SecureLS from 'secure-ls'

export const useUserStore = defineStore('user', {
  state: () => ({
    username: 'PraZ',
  }),
  persist: {
    storage: {
      getItem: (key) => { return (new SecureLS()).get(key) },
      setItem:  (key, value) => { (new SecureLS()).set(key, value) }
    }
  },
})

[qxygene]

thank you, it is working

[prazdevs]

ok no problem, i should start working on a proper docs website to have examples like this. closing this for now :)

[videovillain]

What is the new way to do this? To go along with this new style:

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import SecureLS from 'secure-ls'

export const useUserStore = defineStore('user', () => {
  // state
  const user = ref(null as User)
  const loggedIn = ref(false)

  // getters
  const getUser = computed(() => username.value)
  const isLoggedIn = computed(() => loggedIn.value)

  // actions
  function login(user: User) {
    user.value = user
    loggedIn.value = true
  }
  function logout() {
    user.value = null
    loggedIn.value = false
  }

  // return 
  return { getUser, isLoggedIn }
}

How does the old style of persist fit into the new style?

persist: {
    storage: {
      getItem: (key) => { return (new SecureLS()).get(key) },
      setItem:  (key, value) => { (new SecureLS()).set(key, value) }
    }
  },

[prazdevs]

@videovillain you need to add a 3rd parameter to the defineStore as follows:

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import SecureLS from 'secure-ls'

export const useUserStore = defineStore(
  'user',
  () => {
	  // state
	  const user = ref(null as User)
	  const loggedIn = ref(false)
	
	  // getters
	  const getUser = computed(() => username.value)
	  const isLoggedIn = computed(() => loggedIn.value)
	
	  // actions
	  function login(user: User) {
	    user.value = user
	    loggedIn.value = true
	  }
	  function logout() {
	    user.value = null
	    loggedIn.value = false
	  }
	
	  // return 
	  return { getUser, isLoggedIn },
	{
		persist: {
			storage: {
		      getItem: (key) => { return (new SecureLS()).get(key) },
		      setItem:  (key, value) => { (new SecureLS()).set(key, value) }
		    }
		}
	}
}

[videovillain]

Awesome, thanks!

Could I clarify some additional things with you please?

1. When I want to use the 'user' state in a component -which has multiple properties since it is of type User, some of which I need to adjust- would this work properly?

const userStore = useUserStore()
const { getUser, isLoggedIn } = storeToRefs(userStore )

const user = getUser

// then use the user and its properties like this?
console.log(user.user_name); // <-- outputs initial user name
user.user_name = "bob"
console.log(user.user_name); // <-- ideally outputs 'bob'

Or should I also return the 'user' state itself in the store and use it in a component like this:

const userStore = useUserStore()
const { user } = storeToRefs(userStore )

// then just use the user and its properties all over like this?
console.log(user.value.user_name); // <-- outputs initial user name
user.value.user_name = "bob"
console.log(user.value.user_name); // <-- ideally outputs 'bob'

Or would both of those be worse options and I should make "getter" and "setters" for each individual property of type User inside the store itself?

Because 'user' state is already a ref, and because getUser is already a computed ref, and because I need access to all the properties and sometimes I need them to be mutable, I'm looking for the best way forward.

2. Let's say I have this User type and in it there are a few different properties, some I'd like to store in persisted states and some I don't need to store in persisted states, what is the best way forward in this case?