Last vuex is actually super simple, just 3 steps to briefly introduce vuex 3 step into the door, but for beginners to easily digest, I cut a lot of content, this section is to make up the missing content, if you have not read the previous chapter, please click the link to have a look and come back, otherwise, you will feel confused about this article.

Purely personal experience, unavoidably there are incorrect places, if found, welcome to correct!

Again, this is for beginners.

A, Getter

Let’s recall the code from the previous article

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

It is assumed that the logical change now, we eventually expect data (getName), is based on this. $store. State. The name on a complex calculation, and just this getName should be used in several places, then we will have to copy number.

Vuex gives us the getter, look at 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'
  },
  // For computed ----------------- similar to VUE, the following five behaviors have been added
  getters:{
    getReverseName: state= > {
        return state.name.split(' ').reverse().join(' ')}},// Similar to mothods in vUE
  mutations: {
    updateName (state) {
      state.name = 'newName'}}})Copy the code

Then we can use file location/SRC /main.js like this

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

In fact, the getter does more than just encapsulate; like vue’s computed property, it caches the resulting data and recalculates it only when a dependency changes.

Actions and $dispatch

Careful, you must find that the annotations on the head of mutations in my previous code are similar to mothods in VUE.

Why note synchronous methods after methods? Mutation can only be a synchronized function, a synchronized function, and a synchronized function!! Take a look at Vuex:

Now imagine that we are debugging an app and looking at the mutation log in devtool. Each mutation is recorded, and DevTools needs to capture a snapshot of the previous state and the next state. However, the callback in the asynchronous function in mutation in the example above made this impossible: Because the callback had not yet been called when mutation was triggered, DevTools did not know when the callback was actually called — essentially any state change made in the callback was untraceable.

What if we want to trigger an asynchronous operation? The answer is action + $dispatch, and 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(' ')}},// Similar to mothods in vUE
  mutations: {
    updateName (state) {
      state.name = 'newName'}},// Similar to mothods(asynchronous methods) in vUE -------- the following 7 behaviors are added
  actions: {
    updateNameAsync ({ commit }) {
      setTimeout((a)= > {
        commit('updateName')},1000)}}})Copy the code

Then we can use it in our vUE pages

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

3. Module

As the project got bigger and bigger, a single store file was definitely not what we wanted, so there was modularity. Suppose you have these two files in the SRC /store directory

moduleA.js

exportdefault { state: { ... }, getters: { ... }, mutations: { ... }, actions: { ... }}Copy the code

moduleB.js

exportdefault { state: { ... }, getters: { ... }, mutations: { ... }, actions: { ... }}Copy the code

So we can change index.js to something like this

import moduleA from './moduleA'
import moduleB from './moduleB'

export default new Vuex.Store({
    modules: {
        moduleA,
        moduleB
    }
})
Copy the code

This allows us to easily split a store into multiple stores.

Four,

  1. The parameter for actions isstoreObject, and the arguments for getters and Mutations arestate .
  2. Actions and mutations can also pass a second parameter, see vuex official documents for details
  3. Getters/mutations/actions have corresponding map, such as: mapGetters, specific see vuex official documentation
  4. If you are afraid of naming conflicts inside the module, you can use the namespace, see the official vuex documentation
  5. Vuex is actually very similar to VUE, with data(state),methods(mutations,actions),computed(getters), and modularity.

If you find this article useful, please add a star to github of this article. Thank you very much

In addition, there are other front-end tutorials and components available on Github for those who are interested. Your support is my biggest motivation.