Vue 3 + Pinia - Why is the State Not Clearing?

Question

I have a Pinia Store, with the below state:

  worklist: ref({}) as Ref<Worklist>,
  worklists: ref([])  as Ref<Worklist[]>,
  worklistMenuItems: ref([]) as Ref<object[]>,

I am trying to update my data table every time a GET fetch method runs but the state does not seem to be updating for some reason.

getWorklists(): void
  {
    //Clear worklist values from store before repopulating with results from new GET       

    // This does not seem to be working
    //The reactivity appears to be broken for some reason 
    // this.worklist = {id: undefined, worklistName: ''};
    // this.worklists = [];
    // this.worklistMenuItems.splice(0);

    this.clearValues();

    fetch(apiURL + 'Worklists',
    {
      headers:
      {
        "Accept": "application/json",
        "Content-Type": 'application/json'
      }
    })
    .then(response => 
      {
        return response.json();
      })
    .then(data =>
      {
        data.forEach((wl: Worklist) =>
        {
          // this.worklist = new Worklist(wl.id, wl.worklistName);
          // this.worklists.push(this.worklist);
          
          //Dynamically adding items to View Worklist MenuBar Item
          //Adds an icon for each, displays worklist name and creates a page route to /worklistname
          const worklistMenuItem = ref(
            {
              label: wl.worklistName,
              icon:'pi pi-fw pi-file',
              to: `/worklist/${wl.worklistName}`
            }) as Ref<object>;

            this.$patch((state) =>
            {
              state.worklist = new Worklist(wl.id, wl.worklistName);
              state.worklists.push(this.worklist);
              state.worklistMenuItems.push(worklistMenuItem.value);
              console.log("WORKLIST FULL", this.worklist, state.worklist)
            }
          )
          // this.worklistMenuItems.push(worklistMenuItem.value);
        })
      })
      // console.log(this.worklists)
      const x = ref();
      x.value = this.worklists;
      console.log("THIS IS X ", x.value)
      
  },

and a method to clear the reactive values before running the GET each time

  clearValues()
  {
    this.$patch((state) =>
    {
      state.worklist = {id: undefined, worklistName: ''};
      state.worklists.length = 0;
      state.worklistMenuItems.splice(0);
      console.log("WORKLIST SHOULD BE EMPTY", this.worklists, state.worklists)
    }
  )
  },

I have tried all sorts of things now, but cannot seem to get it working.

When running the GET, the reactivity does not seem to be working. After logging the values of store.worklists at the beginning of the GET, after attempting to to clear the values, and the end of the GET after re-populating, I am getting the same data inside it. It does not seem to clear at any point.

Does any body know why? I have tried things like store.worklists = [] I have tried using state.$patch and clearing inside of that I have tried storeToRefs and clearing via my component.

I am at a loss now and have been going around in circles for days.

Any help is hugely appreciated!

Answer 1

Is your clearValues function in the store? If so, $patch isn't necessary and you should be able to do the following to update your state:

actions: {
    clearValues() {
        this.worklists = [];
        this.worklist = {id: undefined, worklistName: ''};
        this.worklistMenuItems.splice(0);
    }
},

If calling it outside the store:

const worklistStore = useWorklists();

const clearValues = () => {
    worklistStore.$patch((state) => {
        state.worklists = [];
        state.worklist = {id: undefined, worklistName: ''};
        state.worklistMenuItems.splice(0);
    });
};

Also, your pinia state values don't need a ref to be reactive.

worklist: {},
worklists: [],
worklistMenuItems: []

Edit: Ah if you're using a function setup rather than object, yes keep the ref.