Currently, in my Vue 3 application with Pinia, I am interested in leveraging the composition API within my Pinia stores. Take a look at this example store:
export const useMyStore = defineStore("my", () => {
const currentState = ref(0);
return { currentState };
});
As it stands, I have direct access to modify the value of currentState. However, I'm unsure if this is the best approach or if I ought to consider preventing direct modifications by implementing getter and setter functions like so:
export const useMyStore = defineStore("my", () => {
const currentState = ref(false);
const readonlyCurrentState = computed(() => currentState.value);
function changeState(newState: boolean) {
currentState.value = newState;
}
return { readonlyCurrentState, changeState };
});
In comparison to the options API which offers getters and actions, I find myself questioning whether or not I should follow suit in this scenario.
While the answer may be subjective, I seek insight on whether encapsulating the state currentState would serve to safeguard against accidental corruption.