Vuex is a state management mode developed specifically for vuue.js applications. This state self-management application consists of three modes

  • State, the data source that drives the application;
  • View, to declaratively map state to the view;
  • Actions, in response to changes in state caused by user input on the view.

Create a store instance object in store/index.js and configure the state object in it, for example

Note: you can manually create a store/index.js file and import it in main, or you can install vuex directly when you create a VUE project

There are three ways to use data stored in store in vue files

  • Used directly in.vue files
<template>
    <div>
        {{$store.state.demoOne}}
    </div>
</template>
Copy the code
  • Computed () by calculating a function
<template> <div id="app"> {{getdata.demoOne}} </div> </template> <script> export default { data(){ return {} }, computed: {// Features of computed functions: There is a caching mechanism. If later code relies on the computed value, the computed value will be taken from the cache of the first computed value, avoiding multiple computations of a value. Getdata (){return this.$store.state}},} <script>Copy the code
  • Used with the mapState() helper function
<template> <div id="app"> {{demoOne}}-{{demoTwo}} <router-view></router-view> </div> </template> <script> export default  { data(){ return {} }, computed:{ ... MapState ([' demoOne ', 'demoTwo'])} / / extension operators,} < / script >Copy the code