plugins(vuex) and the composition api

Author: Wiriyamu

src/App.vue

@@ -1,11 +1,25 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </div>
-  <router-view/>
+  <button @click="increment">Click</button>
+  <div v-if="count % 2 === 0">Count: {{ count }}. Count is even.</div>
+  <div v-if="count % 2 !== 0">Count: {{ count }}. Count is odd.</div>
 </template>
 
+<script>
+import { computed } from "vue";
+import { useStore } from "vuex";
+export default {
+  setup() {
+    const store = useStore();
+    const count = computed(() => store.state.count);
+    const increment = () => {
+      store.commit("increment");
+    };
+
+    return { count, increment };
+  },
+};
+</script>
+
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

tests/unit/example.spec.js

@@ -1,29 +1,25 @@
 import { mount } from "@vue/test-utils";
-import { ref } from "vue";
+import App from "@/App.vue";
+import { createStore } from "vuex";
 
-const App = {
-  setup() {
-    const count = ref(0);
-    const increment = () => (count.value += 1);
-
-    return { count, increment };
-  },
-  template: `
-    <button @click="increment"></button>
-    <div v-if="count % 2 === 0">
-      Count: {{ count }}. Count is even.
-    </div>  
-
-    <div v-if="count % 2 !== 0">
-      Count: {{ count }}. Count is odd.
-    </div>
-  `,
+const createVuexStore = () => {
+  return createStore({
+    state: () => ({
+      count: 0,
+    }),
+    mutations: {
+      increment(state) {
+        state.count += 1;
+      },
+    },
+  });
 };
 
-function factory({ data } = { data: {} }) {
+function factory() {
+  const store = createVuexStore();
   return mount(App, {
-    data() {
-      return data;
+    global: {
+      plugins: [store],
     },
   });
 }