• This is the 26th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Form processing

When using the V-Model on Vuex’s state, Vue throws an error because it directly changes the value of state.

If you want to use two-way data, you need to simulate a V-model: :value=” MSG “@input=”updateMsg”.

Computed properties for bidirectional binding

This is much more verbose than the V-Model itself, so we can also use setters to evaluate properties to implement bidirectional binding:

<input v-model="msg">
Copy the code
computed: {
  msg: {
    get () {
      return this.$store.state.obj.msg;
    },
    set (value) {
      this.$store.commit(UPDATE_MSG, { value }); }}}Copy the code

Mutation must be a synchronization function

Remember that mutation must be a synchronization function. According to?

mutations: {
  [COUNT_INCREMENT] (state) {
    setTimeout(() = > {
      state.count ++;
    }, 1000)}},Copy the code

By executing the code above, we can see that the change to state is performed in the callback function, which will make our code bad in DevTools: When mutation was triggered, the callback had not yet been called, devTools did not know when the callback was actually called, and any state changes made in the callback were untraceable.

Mutations change the status synchronously. If mutations is an asynchronous function, it changes the status asynchronously, then DevTools cannot track the data changes.

Strict mode

To turn on strict mode, simply pass strict: true: when creating a store.

const store = new Vuex.Store({
   // ... 
  strict: true
})
Copy the code

In strict mode, an error is thrown whenever a state change occurs that is not caused by a mutation function. This ensures that all state changes are tracked by the debugging tool.

Development environment vs. release environment

Do not enable strict mode in a release environment! Strict mode deeply monitors the status tree to detect non-compliant state changes, and be sure to turn off strict mode in a release environment to avoid performance losses.

const store = new Vuex.Store({
   // ... 
  strict: process.env.NODE_ENV ! = ='production'
})
Copy the code

The last

If it is helpful to you, I hope to give you a 👍 comment/collection/three even!

Bloggers are honest and answer questions for free ❤