The component communication methods we learned earlier:

1.Parent component passed props Transfer data to subcomponents
 2.Child components pass data to parent components through custom events.
3.Non parent-child relationship via central event bus bus Transfer data.

In actual project summary, multiple components often need to access the same data, and they all need to respond to changes in data.
It is complex to transfer values between components using bus. If you want to ensure synchronous update, the workload is huge and inconvenient to maintain.
Role of vuex:
Put the data in the same place for safekeeping. Other components only need to reference vuex for management. As long as the data changes, other components will be updated automatically.

[note]
If our page is relatively simple, remember not to look for trouble to introduce Vuex. We use Vuex because after the project becomes complex, a lot of data needs to be transferred between parent components, child components and other components, which is very cumbersome to process.

What is Vuex?
Vuex is designed for Vue JS application development state management mode. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way.
Popular: vuex is a tool for centralized management of shared data on which components depend.

vuex includes three parts: state, actions and changes.
state:
It is equivalent to a warehouse, where all the required data is stored.
mutations:
If you want to modify the data in the warehouse, you can only change it through changes.
actions:
Changes can only perform synchronous operations, while actions can perform asynchronous operations

Summary:
1. To modify the data in the state, you must go through changes
2. Changes can only perform synchronous operations. Codes such as ajax and timer cannot be executed in changes.
3. To execute asynchronous operations, you need actions to submit the modification operation to changes.
4. The status (data) in state can be referenced in the component.

Download:

 npm i vuex

Get data in state:

 1.Original way  this.$store Can get vuex Medium store Object instance.
 this.$store.state.Data name

 2.Calculation properties can be state Attribute definition in the calculation attribute can reduce the code complexity when calling the same data multiple times.

3.auxiliary function :Help us make it more convenient store The data in is mapped to the calculated properties of the component. More obvious when multiple data

1. Import mapState
2. Execute mapstate function in computed
3. Expand the result with the extension operator (...).
... mapState(["data1", "data2"])
example
Under the store folder, index JS file

//Introduce vue
import Vue from "vue";
//Introducing vuex
import Vuex from "vuex";
//The registered plug-in executes the install function of vuex
Vue.use(Vuex);
//3. Create and export the store instance object of vuex
export default new Vuex.Store({
  //The warehouse is used to store shared data
  state: {
    //Managed data
    count: 10,
    age: 20,
    name: "admin",
  },
});

In main JS folder

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

//It is equivalent to index. In the store folder js
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  //4. Mount the store on the root instance
  store,
  render: (h) => h(App),
}).$mount("#app");

About.vue

<template>
  <div class="about">
    <h1>obtain state Data in:{{ this.$store.state.count }}</h1>
  </div>
</template>

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <div>Original way:{{ this.$store.state.count }}</div>
    <!-- <div>Calculate attribute method:{{count}}</div> -->
    <div>Auxiliary function mode:{{ count }}--{{ name }}--{{ age }}</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Home",
  components: {},
  computed: {
    count() {
      return this.$store.state.count;
    },

    //use... Expand the result of the mapState function
    ...mapState(["count", "age", "name"]),
  },
};
</script>

<style lang="scss" scoped>
.home {
  font-size: 24px;
}
</style>

Data sharing can be realized by running both components