從上篇文章當中相信大家已經對vuex有了一些大概了解了，接下來咱們結合實例來繼續敲代碼吧！切記一定要動手實操練習一遍！

接下來咱們來完成一個超級簡單的投票功能！要求很簡單，點擊“投票”按鈕，相應的票數會發生加1的變化，另外總票數為所有票數之和，如圖所示：

1、首先通過vue-cli生成一個名字叫做demo的項目

vue init webpack demo

2、項目搭建完成以後，安裝vuex

npm install vuex --save

3、在src目錄下創建vuex文件夾，然後在該文件夾下創建一個名字叫做store的js文件

4、在store.js中寫入以下代碼：

import Vue from ‘vue‘;//
 
引用vue
import Vuex from ‘vuex‘;//引用vuex
Vue.use(Vuex);//使用vuex
const state={
    nodeVoteCount:0,//node的初始票數
    vueVoteCount:0,//vue的初始票數
}
export default new Vuex.Store({////暴露Store對象
    state
})

5、在main.js當中引入在store.js文件當中創建的store對象，並在Vue實例中添加

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import store from 
 
‘./vuex/store‘//導入store.js
Vue.config.productionTip = false
new Vue({
    el: ‘#app‘,
    router,
    store,//添加store
    components: { App },
    template: ‘<App/>‘
})

6、修改App.vue為：

<template>
  <div id="app">
      <!--通過$store.state.nodeVoteCount獲得nodeVoteCount的狀態值
          通過$store.state.vueVoteCount獲得vueVoteCount的狀態值
 
-->
      <div><h2>總票數：{{$store.state.nodeVoteCount+$store.state.vueVoteCount}}</h2></div>
      <div>
          <img src="./assets/node.png">
          <h3>如何通過node.js對數據進行MD5加密</h3>
          <input type="button" value="投票">票數:{{$store.state.nodeVoteCount}}
      </div>
      <hr/>
      <div>
          <img src="./assets/vuex.png">
          <h3>真正掌握vuex的使用方法（一）</h3>
          <input type="button" value="投票">票數：{{$store.state.vueVoteCount}}
      </div>
  </div>
</template>
<script>
export default {
  name: ‘App‘
}
</script>

7、到現在為你，初始的票數已經被咱們獲取到了。
不過有心的你應該已經發現了：當獲得vuex狀態值的時候代碼好長，好啰嗦，好不方便！不過沒關系，vuex為偉大的你提供了一種十分簡便方法。
- 首先在App.vue當中的script內引入vuex

import vuex from "vuex";

• 然後在computed計算屬性裏寫如下代碼：

computed:vuex.mapState(["vueVoteCount","nodeVoteCount"])
或
computed:vuex.mapState({//mapState方法最終返回的是一個state對象。
    vueVoteCount:state=>state.vueVoteCount,
    nodeVoteCount:(state)=>state.nodeVoteCount
})

• 再然後修改App.vue的template為：

  <div id="app">
      <!--是不是很方便？直接寫狀態名稱即可-->
      <div><h2>總票數：{{nodeVoteCount+vueVoteCount}}</h2></div>
      <div>
          <img src="./assets/node.png">
          <h3>如何通過node.js對數據進行MD5加密</h3>
          <input type="button" value="投票">票數:{{nodeVoteCount}}
      </div>
      <hr/>
      <div>
          <img src="./assets/vuex.png">
          <h3>真正掌握vuex的使用方法（一）</h3>
          <input type="button" value="投票">票數：{{vueVoteCount}}
      </div>
  </div>

經過上面的代碼調整以後，你會發現調取vuex的狀態值簡便了不少。
不過設置mapState也要花費一些精力。
那麽咱們再通過ES6的知識再將上面的JS部分進行一番優化。
- 首先咱們將引入的vuex那部分修改為：

import {mapState} from "vuex";//通過ES6的對象解構賦值

• 然後在使用mapSate的時候，咱們就可以省略一級對象（vuex）,即computed修改為：

computed:mapState(["vueVoteCount","nodeVoteCount"])
或
computed:mapState({
    vueVoteCount:state=>state.vueVoteCount,
    nodeVoteCount:(state)=>state.nodeVoteCount
})

• 現在有的小夥伴是不是在想，以後如果我要在這裏寫自己的計算屬性怎麽辦？怎麽辦？咱們可以通過對象合並的方法去實現。
  通過Object.assign()合並對象：

//Object.assign()方法的第一個參數為目標對象，其余參數為源對象。
//通過該方法可以將所有源對象的值copy到目標對象。
//該方法的返回值即為這個目標對象
computed:Object.assign(mapState(["vueVoteCount","nodeVoteCount"]),{
    //自己的計算屬性可以在這裏面寫哦
}),
//或
computed:Object.assign(mapState({
    vueVoteCount:state=>state.vueVoteCount,
    nodeVoteCount:(state)=>state.nodeVoteCount
}),{
   //自己的計算屬性可以在這裏面寫哦
})

當然也可以用…(擴展運算符）來合並對象

computed:{
    ...mapState(["vueVoteCount","nodeVoteCount"]),
    ...{
        //自己的計算屬性可以在這裏面寫哦
    }
}
//或
computed:{
    ...mapState({
        vueVoteCount:state=>state.vueVoteCount,
        nodeVoteCount:(state)=>state.nodeVoteCount
    }),
    ...{
        //自己的計算屬性可以在這裏面寫哦
       }
}

真正掌握vuex的使用方法（二）現在有的小夥伴是不是在想，以後如果我要在這裏寫自己的計算屬性怎麽辦？怎麽辦？咱們可以通過對象合並的方法去實現。 通過Object.assign()合並對象：