feat(ui): client state mixin

packages/@vue/cli-ui/src/components/StatusBar.vue

@@ -78,7 +78,6 @@
 import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
 import CONSOLE_LOG_LAST from '../graphql/consoleLogLast.gql'
 import CONSOLE_LOG_ADDED from '../graphql/consoleLogAdded.gql'
-import DARK_MODE from '../graphql/darkMode.gql'
 import DARK_MODE_SET from '../graphql/darkModeSet.gql'
 
 let lastRoute
@@ -94,7 +93,6 @@ export default {
  apollo: {
  projectCurrent: PROJECT_CURRENT,
  consoleLogLast: CONSOLE_LOG_LAST,
- darkMode: DARK_MODE,
 
  $subscribe: {
  consoleLogAdded: {

packages/@vue/cli-ui/src/components/TerminalView.vue

@@ -35,7 +35,6 @@
 import { Terminal } from 'xterm'
 import * as fit from 'xterm/dist/addons/fit/fit'
 import * as webLinks from 'xterm/dist/addons/webLinks/webLinks'
-import DARK_MODE from '../graphql/darkMode.gql'
 
 Terminal.applyAddon(fit)
 Terminal.applyAddon(webLinks)
@@ -116,10 +115,6 @@ export default {
  }
  },
 
- apollo: {
- darkMode: DARK_MODE
- },
-
  computed: {
  theme () {
  if (this.darkMode) {

packages/@vue/cli-ui/src/main.js

@@ -14,6 +14,7 @@ import Responsive from './util/responsive'
 import SharedData from './util/shared-data'
 import PluginAction from './util/plugin-action'
 import gql from 'graphql-tag'
+import ClientState from './mixins/ClientState'
 
 window.gql = gql
 
@@ -44,6 +45,8 @@ for (const key in Filters) {
  Vue.filter(key, Filters[key])
 }
 
+Vue.mixin(ClientState)
+
 Vue.config.productionTip = false
 
 // For client addons

packages/@vue/cli-ui/src/mixins/ClientState.js

@@ -0,0 +1,11 @@
+import CONNECTED from '../graphql/connected.gql'
+import DARK_MODE from '../graphql/darkMode.gql'
+
+// @vue/component
+export default {
+ apollo: {
+ // In plugins, user `this.$root.connected` for example
+ connected: CONNECTED,
+ darkMode: DARK_MODE
+ }
+}