【vue2.0进阶】案例：用Vuex实现一个简单的计算器
昨天我們學習了Veux的幾個重要的核心概念。當然只講概念還不夠，必須要結合上案例才能理解得更深刻。
馬上就開始我們今天的案例：用Vuex實現一個簡單的網頁計算器。
?
我們之前的章節說過，Vuex適合在較為大型復雜的項目中使用。在實際開發過程中，簡單的計算器也許只算得上是一個簡單的小項目，你完全可以不用Vuex來實現。所以，以下我們演示的案例只作為demo來講解Vuex，讓大家能夠輕松地搞懂Vuex的用法，不代表在實際開發中的做法。
?
我們先看看我們要實現的簡單計算器的效果：
（我是gif，加載有點慢）
此計算器的功能包括了簡單的加、減、乘、除運算，和一個清空數據的按鈕。
??
項目分析
分析一：考慮到運算的結果result和所有輸入的值enter（看下圖指示），是跟每個組件相關聯的，我們會將result和enter作為應用層的狀態（全局數據）處理，這里就會簡單使用到我們的Vuex提供的倉庫store。
分析二：每個鍵盤的按鍵，我們可以封裝成一個個自定義的組件:?<keyboard/>?
（看作16個keyboard組件）
簡單分析完畢，馬上開始我們的代碼部分，CSS部分相對簡單，不在此展開講解。
第1步：安裝Vuex
老規矩，在項目中安裝Vue和Vuex，要保證Vuex在安裝之前，Vue已經成功安裝。
?<script src="js/vue.js"></script>
?<script src="js/vuex.js"></script>
?
第2步：創建倉庫store
?//創建倉庫store
?const store = new Vuex.Store({
??? state:{
???????result:"",//運算結果
? ? ?enter:""? //輸入的值
??? }
?});
?
我們剛開始分析的時候，把result和enter看作是應用層級的狀態，所以定義為倉庫store的state對象的屬性值來管理它們，初始化為空字符串。
?
第3步：自定義組件<keyboard/>
在Vue2.0基礎系列的第九節《掌握vue的另一個核心：組件》 ，我們講解過如何規劃和實現一個自定義的組件，還不了解的同學可以先從前面的章節學起。
?
可以看到，每個鍵盤所代表的值不一樣。分別從0~9，還有各種運算按鍵，所以我們要將這些值動態地傳入組件內部。
因此：我們可以這樣實現?<keyboard/>?組件。
?
?//自定義組件
?Vue.component('keyboard',{
??? //接受的參數value，代表鍵盤的值
? ?props:['value'],
??? //模板
? ?template:`<div
???????????????:data-value="value">
??????????????? {{value}}
???????????? </div>`
?});
?
我們添加了一個動態的屬性data-value，后面我們會使用到它。
?
有了組件，我們就可以編寫我們的頁面Html的代碼，并使用這個?<keyboard/>?組件。
?
第4步：頁面布局
?<div id="app">
??? <div class="result">運算結果</div>
??? <div class="enter">輸入的值</div>
??? <div class="keys">
??????? <div class="list">
??????????? <!--鍵盤區域-->
??????? </div>
??? </div>
?</div>
?
第5步：創建Vue實例。
要使用Vue，就必須創建一個Vue實例。
?//創建Vue實例
?const app = new Vue({
??? //掛載元素
??? el:"#app",
?});
?
通過以上5步，我們做了以下準備：
? 1. 安裝了Vue和Vuex
? 2. 創建了倉庫store
? 3. 定義了鍵盤組件?<keyboard/>?
? 4. 頁面的布局
? 5.創建了Vue實例
但貌似距離實現我們的計算器，是否還有點距離。
接下來我們一步一步完善以上的代碼，將這4部分關聯起來，實現完整的計算器。
?
首先，我們的鍵盤區域還沒有完善，我們先來實現它。
?<div class="list">
??? <!--鍵盤區域，還沒實現-->
?</div>
?
16個按鍵的值我們會事先定義好，放在Vue實例的data中，所以我們將Vue實例的代碼修改如下：
?
?//創建Vue實例
?const app = new Vue({
??? //掛載元素
??? el:"#app",
??? data:{
??????? //16個按鍵的值
??????? keys:[
??????????? 'clear', '+', '-', '*',
??????????? '7', '8', '9', '/',
??????????? '4', '5', '6', '0',
??????????? '1', '2', '3', '=',
??????? ]
??? }
?});
?
有了這16個值，我們利用vue提供的v-for指令和?<keyboard/>?組件，實現鍵盤區域的渲染。
我們對頁面中的鍵盤區域部分代碼進行修改。
修改前：
?<div class="list">
??? <!--鍵盤區域-->
?</div>
?
修改后：
?
?<div class="list">
??? <keyboard
? ? ? ??v-for="item in keys"
? ? ? ??:value="item">
??? </keyboard>
?</div>
?
我們通過?v-for?指令，將keys中的每一個值動態地傳入到?<keyboard/>?組件中去。
?
結合我們事先寫好的CSS樣式，我們可以看到鍵盤區域的渲染效果：
（效果圖）
?
但是我們也看到，鍵盤上面的幾個中文：“運算結果”和“輸入的值”不是我們想要的，我們再來修改它。
?
你會發現，我們需要的運算結果result和輸入的值enter是應用層的狀態，它倆被我們定義在了倉庫store上。那么問題來了，我們如何將倉庫store和vue實例關聯起來呢？
Vuex提供了store選項，允許我們將倉庫store引入到根組件，并且此跟組件的所有子組件都可以使用到倉庫store，而且子組件無需顯示的引入。有了這個機制，我們就很方便地將倉庫store和vue實例關聯起來了。
?
具體怎么使用呢？很簡單，我們將Vue實例的代碼修改如下：
?
?//創建Vue實例
?const app = new Vue({
??? //掛載元素
? ?el:"#app",
??? //ES6語法，相當于"store":store
??? store,
??? //.....data部分不變，此處省略.......
?});
?
這樣我們就可以將store引入，且能通過 this.$store 訪問到它。
?
好了，引入它之后，我們就來使用state中的應用層的數據result和enter。怎么使用呢？
由于計算結果result和輸入值enter經常會被?<keyboard/>?組件操作更新，所以我們這里需要使用Vue的computed計算屬性。
?
所以，我們給Vue實例增加計算屬性，增加一下代碼：
?//創建Vue實例
?const app = new Vue({
???
??? //.....其他代碼不變....///
???
??? //增加計算屬性
? ?computed:{
? ? ??result(){
? ? ? ??//通過this.$store獲取倉庫的數據result
? ? ? ??return this.$store.state.result;
? ? ??},
? ? ??enter(){
? ? ? ?//通過this.$store獲取倉庫的數據result
? ? ? ??return this.$store.state.enter;
? ? ??}
??? }
?});
?
我們成功地將倉庫的狀態result和enter關聯到了我們的實例中的計算屬性result和enter，這樣，每當倉庫中的運算結果result和輸入值enter發生了變化，實例中的計算屬性result和enter也會做出響應式更新。
?
我們把計算屬性result和enter綁定在html上，來渲染我們的頁面。修改的部分如下，修改前：
?<div class="result">運算結果</div>
?<div class="enter">輸入的值</div>
?
修改后：
?<div class="result">
??? <!--綁定計算屬性result-->
??? {{ result }}
?</div>
?<div class="enter">
??? <!--綁定計算屬性enter-->
??? {{ enter === ""?0:enter}}
?</div>
?
由于業務需要，輸入的值默認為0，所以我們做了簡單的三元運算，當ente為空字符串的時候，我們在頁面上顯示：0。
我們此時看到的頁面效果：
（效果圖）
似乎離我們的計算器越來越近了，但我們點擊任意一個鍵盤的時候，似乎還沒有任何反應。
接下來，我們就來完成最后一步：點擊鍵盤，對倉庫store的狀態result和enter進行修改。
?
我們上一節說過，在Vuex中不能任意修改應用層的狀態，要修改，就得用它提供的唯一途徑：通過commit提交mutation。
?
沒問題，提交就提交嘛，那還不簡單。
?
當用戶點擊鍵盤的時候，我們就提交一個mutation，并把當前按的鍵的值傳過去。為此，我們修改?<keyboard/>?組件的代碼。
?
修改后如下：
?//定義組件
?Vue.component('keyboard',{
??? props:['value'],
??? //點擊事件的監聽處理getKeyboardValue
??? template:`<div
? ? ? ? ? ? ?@click="getKeyboardValue"
? ? ? ? ? ? ?:data-value="value">
? ? ? ? ? ? ?{{value}}
? ? ? ? ? ?</div>`,
??? methods:{
? ? ?//點擊事件處理函數
? ? getKeyboardValue(event){
? ? ? ?//獲取當前的按鍵的值
? ? ?let value=event.target.dataset.value;
? ? ? ?//通過commit提交mutation
? ? ? ?this.$store.commit('calculate',value)
? ? ?}
??? }
?});
?
增加了監聽點擊事件的處理函數getKeyboardValue，我們會提交一個名為calculate的mutation給倉庫，并將當前按鍵的值一起提交過去。
?
哦，別忘了，我們的倉庫還沒有定義名為calculate的mutations，趕緊去定義一個。
我們將倉庫store的代碼完善一下。修改后，如下：
?//創建倉庫store
?const store = new Vuex.Store({
??? state:{
??????? result:"",
??????? enter:""
??? },
??? //定義名為calculate的mutation
??? mutations:{
??????? calculate(state,value){? ??
? ? ? ? ? if(value === '='){
? ? ? ? ? ? //按鍵的值為=，進行結果計算
? ? ? ? ? ? state.result = eval(state.enter);
? ? ? ? ? ??state.enter += value;
? ? ? ? ??}else if(value === 'clear'){
? ? ? ? ? ??//按鍵的值為clear，清空數據
? ? ? ? ? ??state.result = state.enter = "";
? ? ? ? ??}else{
? ? ? ? ? ? //輸入結果enter進行拼接
? ? ? ? ? ??state.enter += value;
? ? ? ? ??}
??????? }
??? }
?});
?
這樣，我們就實現了點擊?<keyboard/>?組件，修改倉庫store中的狀態，由于Vue實例的計算屬性是依賴倉庫store的狀態的，所以一旦狀態被修改，計算屬性就會重新計算，從而更新視圖。
?
看流程圖會更加清晰：
（流程圖）
?
我們最后來看看計算器的效果：
（我是gif，加載有點慢）
?
由于我們的項目中使用了vue，瀏覽器安裝了vue-devtool的同學可以打開控制臺，清晰地看到整個計算器應用的組件狀態的變化，方便調試。
（vue-devtool面板）
?
整個案例我們就介紹完了，如果看完云里霧里的話，別慌，這很正常，你必須花時間去敲上幾遍代碼，才能理解滴更加深刻。
如果對里面的語法還存在不明白的同學，可以再復習我們前面章節的基礎知識，這個案例的所有知識在前面的教程中通俗易懂的講解。
代碼，還得多敲，看是看不懂的！
推薦
擴展閱讀
?原創教程：《ECMAScript 6 系列》
?原創教程：《Vue2.0基礎系列》
?附加習題：《ECMAScript 6 系列》的 2套
?附加習題：《Vue2.0基礎系列》的 1 套
關于職場
?職場感悟：混口飯吃，談不上喜歡
?薪資待遇：那么點工資，能招到人嗎？
?鄭州招聘：招聘前端3~5人
?廣州招聘：招聘前端2人
資源推薦
其實學好技術并不難，架構師免費分享全網全套最新web前端、JavaScript、HTML5、PHP、數據庫……等視頻資料！
[總價值超3萬！]年薪35萬以上的大牛幾乎都看了！
加微信:?abc15689892?免費領取，由于領取的朋友比較多，所以加微信時一定要備注：555，否則很難通過。
??
總結
以上是生活随笔為你收集整理的【vue2.0进阶】案例：用Vuex实现一个简单的计算器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java写的学生信息查询系统_Java编
- 下一篇： 《vue2.0基础系列》目录大全，你要的