首先需要在專案中安裝vuex，命令是npm install --save vuex

然後再main.js檔案裡面，通過Vue.use(Vuex)來使用vuex，前提是在該檔案中引入Vuex，即import Vuex from 'vuex';倉庫store 包含了應用的資料（狀態）和操作過程，需要定義store，命令是：const store = new Vuex.Store({  })，main.js檔案如程式碼所示：

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'

Vue.config.productionTip = false
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
})

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')
 

其中，在任何元件中都可以通過$store.state.count來讀取；因此我要在頁面中讀取store中的count值得時候，直接在計算屬性中this.$store.state.count即可

在元件中，來自store的資料只能讀取，不能手動改變，改變store中資料的唯一途徑就是顯示的提交mutations,mutations用來直接修改state的資料，因此元件程式碼如下所示：

<template>
  <div id="app">
    <p>{{ count }}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>
  </div>
</template>

<script>

export default {
  name: 'app',
  computed: {
      count() {
          return this.$store.state.count
      }
  },
  methods: {
      increment () {
          this.$store.commit('increment')
      },
      decrement () {
          this.$store.commit('decrement')
      }
  }
}
</script>
 

這就實現了一個簡單的計數器，關鍵是在該案例中體會vuex中store等的使用。