1.安裝外掛

npm install vuex --save

2.src/store/index.js中

import vue from 'vue'
import vuex from 'vuex'

// 1.安裝外掛
Vue.use(Vuex)

// 2.建立物件
const store = new Vuex.Store({
　　//  儲存狀態
　　state: {
　　　　counter:1000,
　　},
　　mutations: {
　　　　// 方法
　　　　increment(state){
　　　　　　state.counter++
　　　　},
　　　　decrement(state){
　　　　　　state.counter--
　　　　}
　　},
　　actions: {
　　
　　},
　　getters: {

　　},
　　modules: {

　　},
})

// 3.匯出store物件
export default store
 

3.main的js中

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip=false

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

4.頁面使用：$store.state.counter

devtools vue開發的一個瀏覽器外掛

<template> <div> <h2>{{$store.state.counter}}</h2> <button @click="addition">+</button> <button @click="subtraction">-</button> </div> </template>
<script> export default { name: 'Untitled-1', data() { return { } }, methods:{ // 加 addition(){ this.$store.commit('increment') }, // 減 subtraction(){ this.$store.commit('decrement') }, } } </script>

谷歌瀏覽器--》應用商店--》devtools(下載安裝） 安裝完成重啟可以檢視state狀態（看截圖）