vue 多组件共用一个变量

在Vue中，可以使用`Vuex`来实现多组件共用一个变量。`Vuex`是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

具体实现步骤如下：

1. 安装`Vuex`

使用 npm 安装：

npm install vuex --save

2. 创建 store

在项目根目录下创建`store`文件夹，在该文件夹下创建`index.js`文件，编写以下代码：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

上述代码中，我们定义了一个状态`count`和一个`increment`的`mutation`方法，用来修改`count`的值。

3. 在组件中使用

在需要使用`count`的组件中，可以通过以下方式来使用：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">加1</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

上述代码中，我们使用了`mapState`和`mapActions`来映射`state`和`actions`中的方法和变量。这样，在模板中就可以直接使用`count`变量和`increment`方法了。

这样，多个组件就可以共用一个状态`count`了。