下面是详细的攻略：

Vue之封装公用变量以及实现方式

什么是公用变量

公用变量是指在Vue应用程序中多个组件之间会用到同一个变量的值，而且这个值在运行过程中可能会被多个组件修改。公用变量的好处是可以避免多个组件之间重复定义和维护相同的数据，减少代码的冗余和维护成本。

封装公用变量的实现方式

1. 使用Vuex

Vuex是Vue官方推荐的状态管理库，它提供了一种集中式存储管理应用的所有组件的状态，并以响应式的方式进行修改和管理的机制。Vuex的核心概念包括：state、getter、mutation、action和module等。其中state是存储公用变量的地方，getter用于获取state中的值，mutation用于修改state的值，action用于描述异步操作和复杂的修改逻辑，module可以将应用程序分割成多个单独的模块进行管理。

以下是一个简单的示例：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    username: ''
  },
  mutations: {
    setUsername(state, value) {
      state.username = value
    }
  },
  getters: {
    getUsername(state) {
      return state.username
    }
  }
})

export default store

上面的代码定义了一个名为store的Vuex实例，其中state中定义了一个username变量用于存储用户名，mutations中定义了一个setUsername方法用于修改state中的username的值，getters中定义了一个getUsername方法用于获取state中的username的值。

在组件中使用该公用变量的代码如下：

<template>
  <div>
    <input type="text" v-model="username">
    <button @click="setUsername">保存</button>
    <div>当前用户名：{{ username }}</div>
  </div>
</template>

<script>
export default {
  computed: {
    username: {
      get() {
        return this.$store.getters.getUsername
      },
      set(value) {
        this.$store.commit('setUsername', value)
      }
    }
  },
  methods: {
    setUsername() {
      this.$store.commit('setUsername', this.username)
    }
  }
}
</script>

上面的代码中，使用了computed属性将store中的username变量映射到组件的data中，这样就可以在组件中像正常的data属性一样使用该变量。setUsername方法用于将组件中的username的值保存到store中。

2. 使用mixin

mixin是Vue提供的一种复用组件选项的机制，它允许将一组组件选项混合到多个组件中。在使用mixin时，可以将公用的变量作为mixin中的data属性或computed属性进行定义，以便让多个组件进行复用。

以下是一个简单的示例：

const usernameMixin = {
  data() {
    return {
      username: ''
    }
  },
  computed: {
    uppercaseUsername() {
      return this.username.toUpperCase()
    }
  },
  methods: {
    setUsername(value) {
      this.username = value
    }
  }
}

export default usernameMixin

上面的代码定义了一个名为usernameMixin的mixin，其中data属性中定义了一个username变量，computed属性中定义了一个将username转化成大写的uppercaseUsername属性，methods中定义了一个setUsername方法用于将传入的参数保存到username中。

在组件中使用该mixin的代码如下：

<template>
  <div>
    <input type="text" v-model="username">
    <button @click="setUsername(username)">保存</button>
    <div>当前用户名：{{ uppercaseUsername }}</div>
  </div>
</template>

<script>
import usernameMixin from '@/mixins/usernameMixin'

export default {
  mixins: [usernameMixin]
}
</script>

上面的代码中，通过mixins属性将usernameMixin混合到组件中，这样就可以在组件中使用mixin中定义的data、computed和methods等选项了。