Git Product home page Git Product logo

pinia-plugin-watch's Introduction

npx shj

pinia-plugin-watch's People

Contributors

gumball12 avatar

Stargazers

avatar avatar avatar avatar avatar

Watchers

avatar avatar

pinia-plugin-watch's Issues

Access current state from watcher

@Gumball12

I am watching a Boolean in the state and if it is false I want to update the value of another state variable but this is not defined. How would i access the current stores state from a watcher?

i've tried the following:

watch: {
    showOptions(showOptions) {
        if (!showOptions) {
            this.sendEmail = false
        }
    }
}

and

watch: {
    showOptions: (showOptions) => {
        if (!showOptions) {
            this.sendEmail = false
        }
    }
}

Make watchers clearable via $watch 

const useStore = defineStore('store', {
  state: () => ({
    countA: 1,
    countB: 1,
  }),
  watch: {
    countA: () => {
      console.log('changed');
    },
  },
});

const store = useStore();
store.countA = 2; // "changed"

store.$watch.countA(); // clear watch.countA
store.countA = 3; // nothing

Invalid type definition for the $watch property.

The actual defined Watch structure and the type inference structure when accessing the $watch property are different.

const useStore = defineStore('store', {
  state: () => ({
    countA: 1,
    countB: 1,
  }),
  watch: {
    countA: () => {},
  },
});

const store = useStore();

store.$watch.countA; // inferred type: `Watcher<number> | undefined`, but actually `Watcher<number>`
store.$watch.countB; // inferred type: `Watcher<number> | undefined`, but actually `undefined`

Using the vue watch options

This module needs to be able to use the WatchOptions provided by Vue watch.

{
  watch: {
    handler: Function;

    // Vue `WatchOptions`
    immediate?: boolean // default: false
    deep?: boolean // default: false
    flush?: 'pre' | 'post' | 'sync' // default: 'pre'
    onTrack?: (event: DebuggerEvent) => void
    onTrigger?: (event: DebuggerEvent) => void
    once?: boolean // default: false (3.4+)
  },
}

Also, make sure to set the WatchOptions defaults to the same as Vue. Currently, the default value for the deep option is true, but Vue uses false.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.