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

最新推荐文章于 2025-07-04 10:20:58 发布

原创最新推荐文章于 2025-07-04 10:20:58 发布 · 479 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

web前端同时被 2 个专栏收录

419 篇文章

订阅专栏

vue功能实现案例

26 篇文章

订阅专栏

本文介绍了一个基于Vue框架的简单应用实例，通过Vuex进行状态管理。演示了store.js中状态、mutations和actions的定义，以及在info.vue组件中如何调用store方法更新状态，并在about.vue组件中展示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>