Vue之Vuex(状态管理模式)

怼烎@ 2022-04-18 00:46 289阅读 0赞

**简介**  
Vuex(状态管理模式)是Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。  
**作用**

1.  解决不同组件之间的数据共享
2.  解决组件的数据存储问题

**实现**

1.  首先，在store.js实例化一个Vuex，用来对数据进行存储：

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store =  new Vuex.Store({
      state:{
        count:1
      },
      mutations:{
        increment(state){
          state.count++
        }
      }
    })
    
    export default store

1.  在About.vue引入store.js定义好的store，并对store里的count进行累加操作：

<template>
      <div class="about">
        这是about组件
        <br>
        <br>
        <br>
        <br>
        
        {
       {this.$store.state.count}}
        <button  @click="incre">累加</button>
      </div>
    </template>
    
    <script>
    //1.引入store
    import store from "../store.js"
    export default {
      data(){
        return{
          title:"这是about组件"
        }
      },
      //2.注册
      store,
      methods:{
        incre(){
          //改变值的话，引用store.js的increment方法
          this.$store.commit("increment")
        }
      }
    }
    </script>

1.  这就实现数据存储问题，接下来实现不同组件之间的数据共享。在Home.vue引入store.js定义好的store，将会访问到About,vue改变的值：

<template>
      <div class="home">
        这是Home组件
        <br>
        <br>
        <br>
        {
       {this.$store.state.count}}
      </div>
    </template>
    
    <script>
    import store from "../store.js"
    export default {
      data(){
        return{
          title:"这是home组件"
        }
      },
      store,
    }
    </script>