Vuex是否可以理解成为组件间的通信机制

vuex.png

组件间通信的核心——store

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: { //组件状态集中管理,组件间共用的状态管理
    count: 0,
  },
  mutations: { //定义改变状态的一些方法函数

      changeState(){
          this.state.count ++;
      }

  },
  actions: {

  },
});

子组件引入store

<template>
    <div>AAAAA
        <button type="button" @click="add()">我是个按钮</button>
    </div>
</template>

<script>
    //@符号 代表的是src下面的目录
    import store from '@/store'
    export default {
        name: "Info",
        store,
        methods: {
            add() {
                console.log('11111111111');
                store.commit('changeState'); //括号内的引用是store里面定义好的函数名字
            }

        }
    }
</script>

<template>
  <div class="about">
    <h1>This is an about page</h1>

      <p>{{msg}}</p>
  </div>
</template>


<script>
    //@符号 代表的是src下面的目录
    import store from '@/store'
    export default {
        name: "about",
        store,
        data() {
            return{
                msg: store.state.count,
            }
        }
    }
</script>

image.png