vuejs / pinia

🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
https://pinia.vuejs.org
MIT License
12.72k stars 996 forks source link

feat: add new method `destructureStore` #2682

Closed letstri closed 1 month ago

letstri commented 1 month ago

storeToRefs is cool but we cannot get any methods from the store.

Declaring a demo store

const useCounterStore = defineStore('counter', {
  state: () => ({
    n: 1,
  }),

  getters: {
    double: (state) => state.n * 2,
  },

  actions: {
    increment(amount = 1) {
      this.n += amount
    },
  },
})

So to get reactive variables and functions from the store now we should use 3 lines.

const counterStore = useCounterStore();
const { n, double } = storeToRefs(counterStore);
const { increment } = counterStore;

I've added a new method called destructureStore to destruct reactive variables and functions.

const { n, double, increment } = destructureStore(useCounterStore())

// n and double are refs
netlify[bot] commented 1 month ago

Deploy Preview for pinia-playground ready!

Name Link
Latest commit 953d2a050ff894da537a271e3daedc8f4608a590
Latest deploy log https://app.netlify.com/sites/pinia-playground/deploys/6661e8f5e1db670008bc070a
Deploy Preview https://deploy-preview-2682--pinia-playground.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 month ago

Deploy Preview for pinia-official canceled.

Name Link
Latest commit 953d2a050ff894da537a271e3daedc8f4608a590
Latest deploy log https://app.netlify.com/sites/pinia-official/deploys/6661e8f549d8a5000877b8e7