How to use vuex advancedly

This time I will show you how to use vuex in an advanced way, and what are the precautions for advanced use of vuex. The following is a practical case, let's take a look.

1. Getter

Let’s first recall the code of the previous article

computed:{
  getName(){
   return this.$store.state.name
  }
}

Assume that the logic has changed now, and the data we ultimately expect to get (getName) is based on complex calculations on this.$store.state.name. This getName happens to be used in many places, so we have to copy several copies.

vuex provides us with For getter, please see the code (file location/src/store/index.js)

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
  name: 'oldName'
 },
 // 类似 vue 的 computed -----------------以下5行为新增
 getters:{
  getReverseName: state => {
    return state.name.split('').reverse().join('')
  }
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
  updateName (state) {
   state.name = 'newName'
  }
 }
})

Then we can use the file location/src/main.js

computed:{
  getName(){
   return this.$store.getters.getReverseName
  }
}

In fact, getter is more than It only plays the role of encapsulation. Like Vue's computed attribute, it will cache the result data. Only when the dependency changes, it needs to be recalculated.

2. actions and $dispatch

If you are careful, you must have noticed that the mutations header in my previous code has comments similar to the methods (synchronous methods) in vue

Why should it be after methods? What about the synchronous method? Mutation can only be a synchronous function, can only be a synchronous function, can only be a synchronous function!! Please see the explanation of vuex:

Now imagine that we are debugging an app and Observe the mutation log in devtool. Every time a mutation is recorded, devtools needs to capture snapshots of the previous state and the next state. However, in the above example the callback in the asynchronous function in the mutation makes this impossible: because when the mutation fires, the

callback function has not yet been called, devtools does not know when the callback function actually Called - Essentially any state changes made within the callback function are untraceable. So what if we want to trigger an asynchronous operation? The answer is: action $dispatch, we continue to modify the code below store/index.js

File location/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
  name: 'oldName'
 },
 // 类似 vue 的 computed
 getters:{
  getReverseName: state => {
    return state.name.split('').reverse().join('')
  }
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
  updateName (state) {
   state.name = 'newName'
  }
 },
 // 类似 vue 里的 mothods(异步方法) -------- 以下7行为新增
 actions: {
  updateNameAsync ({ commit }) {
   setTimeout(() => {
    commit('updateName')
   }, 1000)
  }
 }
})

Then we can use it like this in our vue page

methods: {
  rename () {
    this.$store.dispatch('updateNameAsync')
  }
}

3. Module Modularization

When the project becomes more and more When it gets bigger, a single store file is definitely not what we want, so there is modularization. Assume that there are these 2 files in the src/store directory

moduleA.js

export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}

moduleB.js

export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}

Then we can change index.js to look like this

import moduleA from './moduleA'
import moduleB from './moduleB'
export default new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use v-model and promise to implement the vue pop-up component

How to use JS implements file drag and drop upload

The above is the detailed content of How to use vuex advancedly. For more information, please follow other related articles on the PHP Chinese website!