每一個 Vuex 應用的核心就是 store（倉庫）。"store" 基本上就是一個容器，它包含著你的應用中大部分的狀態(state)。Vuex 和單純的全局對象有以下兩點不同：

1. Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麽相應的組件也會相應地得到高效更新。

2. 你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交(commit) mutations。

下面就實現一個計數功能簡介這兩句話：

1.安裝vue

我采用的是cmd安裝方式，在你想要建立的工程下，全局安裝vue

例如：F:vueDemo文件夾 cmd F: 回車進入 vueDemo文件夾 輸入下面代碼安裝vue

npm install vue-cli -g

測試是否安裝成功 vue -V 成功會顯示版本號（這裏是2.X的版本）

2. vue init webpack vuexDemo vuexDemo是工程名

3.cd vuexDemo 進入工程

4.cnpm install 鏡像安裝 等待安裝所有依賴的包

5.npm run dev 會自動選擇瀏覽器，運行在本地8080 端口上，會看到頁面

6.Ctrl + c 可結束運行 因為此時沒有安裝vuex,結束運行，安裝vuex

7.cnpm install vuex 成功後，直接第五步即可.

8.建立的工程目錄如下：在src下新建一個store.js文件用於狀態管理

9.在store.js 文件中，引入vue vuex ，其代碼如下：

import Vue from ‘vue‘
import Vuex from ‘vuex‘

//使用vuex模塊
Vue.use(Vuex);

//聲明靜態常量為4  要是訪問它，稱為 訪問狀態對象
const state = {
    count : 4
};

 
//定義一個方法，在vue中，唯一的定義狀態的方法就是提交一個mutations,
//而且導出時，只要導出mutations即可，
//當使用時，也僅僅只要使用統一的 $store.commit(‘event‘) event是事件名稱。

//要是訪問它 ，稱為觸發狀態
const mutations = {
    add(state){
        state.count ++;
    },
    sub(state){
        state.count--;
    }
};


//導出一個模塊
export default new Vuex.Store({
    state,
    mutations
})

10.在main.js 中引入 store.js

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘

//引入倉庫文件
import store from ‘./store.js‘

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  store,            
  render:xx=>xx(App) //直接綁定一個節點進行渲染一個組件，將App.vue這個組件直接渲染進in                           dex.html下id="app"的節點下
})

11.在App.vue文件中，測試狀態

<template>
  <div id="app">
     <div id="appaaa">
        <h1>這是vuex的示例</h1>
        <p>調用常量 {{$store.state.count}}</p>
        <p>
            <button @click = "$store.commit(‘add‘)">加</button>
            <button @click = "$store.commit(‘sub‘)">減</button>
        </p>
    </div>
  </div>
</template>

12，頁面顯示效果

vue學習---vuex之簡介