Let's talk about my understanding of vuex

vuex exists to solve the problem of communication between vue components and components. vuex is a little complicated to understand, but once you understand it, it is easy to use:

Installation:

npm install --save vuex

Introduction

import Vuex

Introduction to several parameters of vuex

State Store initialization data

Getters Secondary processing of data in State (Filtering data is similar to filter) For example, State returns an object. If we want to get the value of a key in the object, use this method

Mutations. All methods for calculating data are written in it (similar to computed ) Use this.$store.commit('mutationName') when triggering in the page to trigger the Mutations method to change the value of the state

Actions The direct triggering method for processing methods that have been written in Mutations is this.$store. dispatch(actionName)

Let’s not rush to learn more first. Let’s print out Vuex

console.log(Vuex) //Vuex为一个对象里面包含Vuex ={
    Store:function Store(){},    
    mapActions:function(){},    // 对应Actions的结果集mapGetters:function(){},    //对应Getters的结果集mapMutations:function(){},  //对应Mutations的结果集mapState:function(){},      //对应State的结果集install:function install(){}, //暂时不做讲解 installed:true //暂时不做讲解}//如果我们只需要里面的State时我们可以这样写import { mapState } from 'vuex';
import { mapGetters, mapMutations } from 'vuex'; //如果需要引用多个时用这种方式处理

If you read the above content repeatedly, it will suddenly become clear. Next, let’s proceed. Take the following examples and describe them in official language

State

State is responsible for storing the state data of the entire application. Generally, you need to inject the store object into the node when using it. You can use this.$ later. store.state directly obtains the state

//store为实例化生成的import store from './store' new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

This store can be understood as a container, including the state in the application, etc. The process of instantiating and generating a store is:

//./store文件const store = new Vuex.Store({
  state: {   //放置state的值
    count: 0,
    strLength:"abcd234"
  },
  getters: {   //放置getters方法
      strLength: state => state.aString.length
  },
  mutations: {   //放置mutations方法
       mutationName(state) {          //在这里改变state中的数据  state.count = 100;
       }
  },  // 异步的数据操作  actions: {      //放置actions方法
       actionName({ commit }) {          //dosomething commit('mutationName')
      },
      getSong ({commit}, id) {
          api.getMusicUrlResource(id).then(res => {
            let url = res.data.data[0].url;
        
          })
          .catch((error) => {  // 错误处理              console.log(error);
          });
      }
  }
});
export default store;

During subsequent use in components, if you want to obtain the corresponding state, you can directly use this.$store.state to obtain it. Of course, you can also use the mapState auxiliary function provided by vuex to map state to calculated properties, such as

import {mapState} from 'vuex'export default {  //组件中
  computed: mapState({
    count: state => state.count
  })
}

Getters

Some states require secondary processing, just Getters can be used. Access the derived state through this.$store.getters.valueName. Or directly use the auxiliary function mapGetters to map it to local calculated properties.

How to use it in components

import {mapGetters} from 'vuex'export default {  
computed: mapGetters(['strLength'])
}

Mutations

Mutations means "change" in Chinese. It can be used to change the state. Its essence is to A function that processes data and receives the unique parameter value state. store.commit(mutationName) is a method used to trigger a mutation. What needs to be remembered is that the defined mutation must be a synchronous function, otherwise there may be problems with the data in the devtool, making state changes difficult to track.

Trigger in the component:

export default {
  methods: {
    handleClick() {      this.$store.commit('mutationName')
    }
  }
}

Or use the auxiliary function mapMutations to directly map the trigger function to methods, so that it can be used directly in element event binding . For example:

import {mapMutations} from 'vuex'export default {
  methods: mapMutations(['mutationName'
  ])
}

Actions

Actions can also be used to change the state, but it is implemented by triggering mutations. The important thing is that it can include asynchronous operations. Its auxiliary function is mapActions, which is similar to mapMutations and is also bound to the component's methods. If you choose to trigger it directly, use this.$store.dispatch(actionName) method.

Used in components

import {mapActions} from 'vuex'//我是一个组件export default {
  methods: mapActions(['actionName',
  ])
}

Plugins

The plug-in is a hook function, which can be introduced when initializing the store. The more commonly used one is the built-in logger plug-in, which is used for debugging.

//写在./store文件中import createLogger from 'vuex/dist/logger'const store = Vuex.Store({
  ...
  plugins: [createLogger()]
})

The above is the detailed content of Let's talk about my understanding of vuex. For more information, please follow other related articles on the PHP Chinese website!