如何在 vue 组件中显示公共状态？

在Vue.js中，状态管理通常是通过某种状态管理库来实现的，最常见的就是Vuex。但是，您也可以使用Vue的响应式系统通过组件的本地状态来管理和显示数据。我将分别提供使用 Vuex 和使用组件本地状态的两种情况的示例。

使用 Vuex 管理状态

首先，确保你已经安装并引入了Vuex。然后，你可以初始化一个store，并定义一些状态(state)和获取这些状态的方法(getters)。

1. 安装 Vuex

如果还没有安装，可以通过npm安装Vuex：

bash
npm install vuex --save

2. 创建 Vuex store

在你的项目中创建一个 store.js 文件：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCount: state => state.count
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

3. 在 Vue 组件中使用 Vuex store

在你的组件中，你可以使用 computed 属性来从 Vuex 获取状态：

javascript
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'getCount' // 使用getCount getter
    ]),
    count() {
      return this.getCount; // 返回Vuex中的count
    }
  },
  methods: {
    ...mapActions([
      'increment' // 使用increment action
    ])
  }
};
</script>

使用组件的本地状态

如果项目较小，或者你只是想简单地管理组件内部的状态，可以直接在组件内使用 data 函数来定义本地状态：

javascript
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0 // 本地状态
    };
  },
  methods: {
    increment() {
      this.count++; // 更新本地状态
    }
  }
};
</script>

这两种方式都可以在Vue组件中管理和显示状态，选择哪种方式取决于你的应用的复杂度和需求。