A brief analysis of the use of centralized state management Vuex

How to use Vuex with centralized state management? The following article will take you to understand vuex and briefly talk about how to use vuex. I hope it will be helpful to you!

1.What is vuex

A dedicated implementation of centralized state management in Vue The Vue plug-in can centrally manage (read/write) the shared state of multiple components in a Vue application. It is also a method of inter-component communication and is suitable for any inter-component communication

2. When to use Vuex

1. Multiple components depend on the same state

2. Behaviors from different components need to change the same state

2.1 How to use Vuex

First of all, we need to know that if you use Vuex, there is a high probability that two or more components will need to share a set of data. /status, so first we need to prepare two components (Count and Person respectively), and then we need to add a store file in the src directory, because Vuex relies on the store to perform a series of preparation tasks

2.2Count component

In this component we can see map...a ​​bunch of things, here we have to talk about the four ## in vuex #map, I have put how to use the map method at the end. Here we only introduce the functions of this component. Count is a component with "powerful" calculation functions. It can amplify the final number 10 times, and it can be an odd number. The operation can be delayed, which is extremely "powerful"

<template>
  <div>
    <h3>当前和为：{{sum}}</h3>
    <h3>当前和为：放大10倍：{{bigSum}}</h3>
    <h3>我在{{school}},学习{{subject}}</h3>
    <h3>下方组件的总人数{{personList.length}}</h3>

    <select v-model.number="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(num)">＋</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">奇数＋</button>
    <button @click="incrementWait(num)">500ms后再＋</button>
  </div>
</template>
<script>
// 引入mapState等
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      num: 1 // 用户选择的数字
    };
  },
  computed: {
    // 使用mapState生成计算属性，从state种读取数据(...mapstate()的意思是将其内的对象全部展开的计算属性里面)
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 对象写法
    ...mapState(["sum", "school", "subject", "personList"]), // 数组写法
    // 使用mapGetters生成计算属性，从getters种读取数据
    // ...mapGetters(["bigSum"]), // 数组写法
    ...mapGetters({ bigSum: "bigSum" }) // 数组写法
  },
  methods: {
    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 对象式
    ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }) //数组式
    // ...mapActions(["jiaodd", "jiaWait"]) //数组式简写
  },
  mounted() {
  }
};
</script>
<style>
button {
  margin-left: 5px;
}
</style>

2.3Person component

ThePerson component is added by "powerful" people Function, he can add your relatives and friends according to his own wishes

<template>
  <div>
    <h3>人员列表</h3>
    <h3>Count组件的求和为{{sum}}</h3>
    <input type="text" placehodler="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>
<script>
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: ""
    };
  },
  computed: {
    personList() {
      return this.$store.state.personList;
    },
    sum() {
      return this.$store.state.sum;
    }
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.commit("ADD_PERSON", personObj);
      this.name = "";
    }
  }
};
</script>

2.4 Introduce components

Introduce these two components into the App respectively Component

<template>
  <div class="container">
    <Count></Count>
    <Person/>
  </div>
</template>

<script>
import Count from "./components/Count";
import Person from "./components/Person";
export default {
  name: "App",
  components: { Count, Person }
};
</script>

2.5 Configure index.js under the store folder

To create a new index.js file under the store folder, Then write the following code into the index file. First, introduce vue and vuex, and then use action to respond. Here we can receive two parameters:

context and valueThey separate the context and the value passed in. We can find everything in the state we configured on the context. This is what is on the context, and the value. The value of value here is 1

// 创建VUex种的store核心
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)
// 准备actions——用于组件内的动作响应
const actions = {
    // 奇数加法
    jiaodd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    // 延迟加
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit("JIA", value)
        }, 500);
    },
}
// 准备mutations——用于数据操作
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    },
    ADD_PERSON(state, value) {
        console.log('mustations种的ADD_PERSON被调用',state.personList);
        state.personList.unshift(value)
    }
}
// 准备state——用于数据的储存
const state = {
    sum: 0, // 当前和
    school: '山鱼小学',
    subject: '前端',
    personList:[{id:'001',name:'张三'}]
}
// 用于加工state种的数据
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
// 创建store并且暴露store
export default new Vuex.Store({
    // actions: actions,// 前后名称一样所以可以触发简写模式
    actions,
    mutations,
    state,
    getters
});

2. The use of four map methods

1.mapState: Used to help us map the data in state to calculated attributes

computed: {
    // 使用mapState生成计算属性，从state种读取数据(...mapstate({})的意思是将其内的对象全部展开的计算属性里面)
    ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 对象写法
        
    // ...mapState(["sum", "school", "subject"]), // 数组写法
  }

2.mapGetters: Used to help us map the data in getters to calculated properties

computed: {
    // 使用mapGetters生成计算属性，从getters种读取数据
    ...mapGetters({bigSum："bigSum"})
    ...mapGetters(["bigSum"])
  }

3.mapMutations:Use To help us generate methods to communicate with mutations, including the function $store.commit()

methods: {
    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 对象式
    // ...mapMutations(["JIA", "JIAN"]), // 数组式(button的名字和vuex里面的名字必须统一)
  },

3.mapActions : Used to help us generate methods to communicate with mutations, including the function of $store.commit()

  methods: {
     // 借助mapActions生成对应的方法，方法种会调用相应的dispath去联系actions
    ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }), //对象式
    // ...mapActions(["jiaodd", "jiaWait"]) //数组式
  },

Note: When using mapActions and mapMutations, if necessary Passing parameters requires passing the parameters when binding the event in the template, otherwise the parameters are event objects.

(Learning video sharing:

vuejs introductory tutorial, Basic programming video)

The above is the detailed content of A brief analysis of the use of centralized state management Vuex. For more information, please follow other related articles on the PHP Chinese website!