Vue learning 29_ Installation of Devtools in Vue and several core concepts of vuex

Properties of Vue status management

When using vue, vue provides us with a browser plug-in Devtools to track the operation of vue, which provides great convenience for us to use vue for development. There are two installation methods: one is to install in the online store of Google browser, click the menu in the upper right corner of the browser, more tools, expand programs, and install in it, One problem I encountered during installation is that Google's online store cannot be accessed, so another installation method is adopted here:
Installation tutorial attached: https://blog.csdn.net/yizufengdou/article/details/103985709
In the last step of dragging, it may be mentioned that dragging cannot be used for installation. Here, you can click the developer mode switch in the upper right corner to solve it;
After the installation is completed, the following content will appear in the browser:

  1. Changes: you can add some methods in the changes attribute. The method must pass in a parameter state. The state of this parameter corresponds to the state object in vuex. Therefore, when you need to operate the data in the state object, you can use state Operate in the form of variable name:
    Example code: add two methods for mutations, increment and increment
import Vue from 'vue'
import Vuex from 'vuex'

// 1. Install plug-ins
Vue.use(Vuex)


// 2. Create object
const store = new Vuex.Store({
  state: {
    counter: 1000
  },
  mutations: {
    // You must pass in a parameter state, which corresponds to the state object
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    },
  },
  actions: {

  },
  getters: {

  },
  modules: {

  }
})
// 3. Export object
export default store

Example code:

import Vue from 'vue'
import Vuex from 'vuex'
// 1. Install plug-ins
Vue.use(Vuex)
// 2. Create object
const store = new Vuex.Store({
  state: {
    counter: 1000
  },
  mutations: {
    // You must pass in a parameter state, which corresponds to the state object
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    },
  },
  actions: {
  },
  getters: {
  },
  modules: {
  }
})
// 3. Export object
export default store

Operation results:

  1. State: a single state tree used to store shared state information
  2. Basic use of getters: equivalent to calculating attributes, which are used to display data after processing
    Example code:
import Vue from 'vue'
import Vuex from 'vuex'

// 1. Install plug-ins
Vue.use(Vuex)


// 2. Create object
const store = new Vuex.Store({
  //Equivalent to data
  state: {
    counter: 1000
  },
  //Similar to method
  mutations: {
    // You must pass in a parameter state, which corresponds to the state object
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    },
  },
  //Perform asynchronous operation
  actions: {

  },
  //getters are similar to calculating properties
  getters: {
    powerCounter(state) {
      return state.counter * state.counter
    }
  },
  modules: {

  }
})

// 3. Export object
export default store

Reference in App component:

<template>
  <div id="app">
    <h2>{{ message }}</h2>
    <h3>{{ $store.state.counter }}</h3>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <hello-vuex></hello-vuex>

    <h3>{{ $store.getters.powerCounter }}</h3>
  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex";

export default {
  name: "App",
  components: {
    HelloVuex,
  },
  data() {
    return {
      message: "I am APP assembly",
    };
  },
  methods: {
    add() {
      // Through this$ store. Commit commit
      this.$store.commit("increment");
    },
    sub() {
      this.$store.commit("decrement");
    },
  },
};
</script>

<style>
</style>

Operation results:

Example code: filter the student array object corresponding to vuex, and filter out students older than 20:
Method 1: use calculation attribute
vuex:

import Vue from 'vue'
import Vuex from 'vuex'
// 1. Install plug-ins
Vue.use(Vuex)
// 2. Create object
const store = new Vuex.Store({
  //Equivalent to data
  state: {
    counter: 1000,
    students: [{
        id: 1,
        name: "Zhang San",
        age: 24
      },
      {
        id: 2,
        name: "Li Si",
        age: 22
      },
      {
        id: 3,
        name: "Wang Wu",
        age: 18
      },
      {
        id: 4,
        name: "Zhao Liu",
        age: 20
      },
      {
        id: 5,
        name: "Ma Qi",
        age: 15
      },
      {
        id: 6,
        name: "Liu Ba",
        age: 24
      },
    ]
  },
  //Similar to method
  mutations: {
    // You must pass in a parameter state, which corresponds to the state object
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    },
  },
  //Perform asynchronous operation
  actions: {

  },
  //getters are similar to calculating properties
  getters: {
    powerCounter(state) {
      return state.counter * state.counter
    },
    }
  },
  modules: {

  }
})

// 3. Export object
export default store

App.vue:

<template>
  <div id="app">
    <h2>{{ message }}</h2>
    <h3>{{ $store.state.counter }}</h3>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <hello-vuex></hello-vuex>

    <h3>{{ $store.getters.powerCounter }}</h3>
    <p>{{ filterAge }}</p>
  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex";

export default {
  name: "App",
  components: {
    HelloVuex,
  },
  data() {
    return {
      message: "I am APP assembly",
    };
  },
  computed: {
    filterAge() {
      return this.$store.state.students.filter((student) => {
        return student.age > 20;
      });
    },
  },
  methods: {
    add() {
      // Through this$ store. Commit commit
      this.$store.commit("increment");
    },
    sub() {
      this.$store.commit("decrement");
    },
  },
};
</script>

<style>
</style>

Operation results:

However, this has the disadvantage that when you want to use this filter in other components, you need to copy and paste again, and the calculation properties of other components are being added. Therefore, the best solution is to define a method in getters in vuex:
Method 2:
vuex:

import Vue from 'vue'
import Vuex from 'vuex'

// 1. Install plug-ins
Vue.use(Vuex)
// 2. Create object
const store = new Vuex.Store({
  //Equivalent to data
  state: {
    counter: 1000,
    students: [{
        id: 1,
        name: "Zhang San",
        age: 24
      },
      {
        id: 2,
        name: "Li Si",
        age: 22
      },
      {
        id: 3,
        name: "Wang Wu",
        age: 18
      },
      {
        id: 4,
        name: "Zhao Liu",
        age: 20
      },
      {
        id: 5,
        name: "Ma Qi",
        age: 15
      },
      {
        id: 6,
        name: "Liu Ba",
        age: 24
      },
    ]
  },
  //Similar to method
  mutations: {
    // You must pass in a parameter state, which corresponds to the state object
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    },
  },
  //Perform asynchronous operation
  actions: {

  },
  //getters are similar to calculating properties
  getters: {
    powerCounter(state) {
      return state.counter * state.counter
    },
    filterAge(state) {
      return state.students.filter((student) => {
        return student.age > 20;
      });
    }
  },
  modules: {

  }
})

// 3. Export object
export default store

Running result: the effect is the same as that of the calculation attribute defined above. Other components do not need to be defined repeatedly when using

In getters, not only one parameter state can be passed, but also two parameters state and getters at the bottom of the bed. Getters is the method in getters we defined
Example code: count the number of students older than 20:

import Vue from 'vue'
import Vuex from 'vuex'

// 1. Install plug-ins
Vue.use(Vuex)


// 2. Create object
const store = new Vuex.Store({
  //Equivalent to data
  state: {
    counter: 1000,
    students: [{
        id: 1,
        name: "Zhang San",
        age: 24
      },
      {
        id: 2,
        name: "Li Si",
        age: 22
      },
      {
        id: 3,
        name: "Wang Wu",
        age: 18
      },
      {
        id: 4,
        name: "Zhao Liu",
        age: 20
      },
      {
        id: 5,
        name: "Ma Qi",
        age: 15
      },
      {
        id: 6,
        name: "Liu Ba",
        age: 24
      },
    ]
  },
  //Similar to method
  mutations: {
    // You must pass in a parameter state, which corresponds to the state object
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    },
  },
  //Perform asynchronous operation
  actions: {

  },
  //getters are similar to calculating properties
  getters: {
    powerCounter(state) {
      return state.counter * state.counter
    },
    filterAge(state) {
      return state.students.filter((student) => {
        return student.age > 20;
      });
    },
    filterAgeLength(state, getters) {
      return getters.filterAge.length
    }
  },
  modules: {

  }
})

// 3. Export object
export default store

Operation results:

Sometimes we also need to customize a parameter to pass in, such as the age in the above example. Sometimes we need to define a parameter to obtain the information of students older than this parameter and return it. However, when the method in getters has one parameter, it represents the state object. When there are two parameters, the second parameter represents the getters object:
Example code:

    // User defined variable to obtain the information of students older than this parameter
    filterAgeStu(state) {
      return function (age) {
        return state.students.filter(stu => stu.age >= age)
      }
    }

Operation results:

Tags: Vue

Posted by PnHoPob on Tue, 10 May 2022 08:57:30 +0300