Allow getters to have a setter defined

Like computed properties

getters: {
	stuff: {
		get() {}
		set() {}
	},
	otherStuff() {
		// only getter
	}
}

[dmolesUC]

@jd-solanki I don’t know if this is the preferred syntax now, but what I’ve been doing is this:

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// note 'options' argument is an arrow function, not an object literal
export const useStore = defineStore('myStore', () => { 

  // state
  const foo = ref(null)

  // ordinary (if contrived) Vue computed property w/getter and setter
  const isBar = computed(() => {
    get() {
       const fooVal = foo.value
       return (!!fooVal) && (!!fooVal.bar)
    },
    set(v) {
       const fooVal = foo.value || {}
       fooVal.bar = !!v
       foo.value = fooVal
    }
  })

  return { foo, isBar }
})

I assume this is the “new function syntax” mentioned above, but I don’t really know – it doesn’t seem to be documented anywhere in the Guide. It’s less structured than the state/getters/actions syntax but much more flexible.

[Fanna1119]

this would be cool. At the moment i just use a computed getter/setter, which works as expected.

//vue component

        const themes = useThemes();
        const activeTheme = computed({
            get: () => themes.getTheme,
            set: val => {
                themes.setTheme(val)
            }
        })

//store

export const useThemes = defineStore({
    id: 'themeSelect',
    state: () => (
        {
            ActiveTheme: useStorage("active-theme", "emerald"),
            availableThemes: ['emerald', 'dark', 'forest', 'synthwave']
        }
    ),
    getters: {
        getTheme() {
            return computed(() => this.ActiveTheme)
        }
    },
    actions: {
        setTheme(val) {
            this.ActiveTheme = val;
        }
    }

})