How to use vuex advancedly-JS Tutorial-php.cn

How to use vuex advancedly

php中世界最好的语言

Release： 2018-05-28 15:07:01

Original

1380 people have browsed it

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
  }
}

Copy after login

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'
  }
 }
})

Copy after login

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

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

Copy after login

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)
  }
 }
})

Copy after login

Then we can use it like this in our vue page

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

Copy after login

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: { ... }
}

Copy after login

moduleB.js

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

Copy after login

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
  }
})

Copy after login

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!