vuex的使用场景【菜单导航、评论弹框】

1.store.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  //统一状态
  state: {
    count: 0
  },
  //状态管理方法集
  mutations: {
    increase() {
      this.state.count++;
    }
  },
  actions: {

  },
});

2.info.vue

<template>
  <div>
    hello info component
    <button type="button" @click="add()">添加</button>
  </div>
</template>
<script>
//引入store
import store from "@/store.js";
export default {
  name: "Info",
  store,
  methods: {
    add() {
      console.log("add Event from info");
      //使用store的方法
      store.commit("increase");
    }
  }
};
</script>

<style scoped>
</style>

3.about.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{msg}}</p>
  </div>
</template>
<script>
//引入store
import store from '@/store'
export default {
  name:'about',
  store,
  data(){
    return {
      //拿到store的公共状态
      msg: store.state.count
    }
  }

}
</script>