當前位置：首頁 > 前端技术 > vue >内容正文

vue

【vue2.0进阶】案例：用Vuex实现一个简单的计算器

發(fā)布時間：2025/3/15 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了【vue2.0进阶】案例：用Vuex实现一个简单的计算器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

昨天我們學習了Veux的幾個重要的核心概念。當然只講概念還不夠，必須要結合上案例才能理解得更深刻。

馬上就開始我們今天的案例：用Vuex實現一個簡單的網頁計算器。

我們之前的章節(jié)說過，Vuex適合在較為大型復雜的項目中使用。在實際開發(fā)過程中，簡單的計算器也許只算得上是一個簡單的小項目，你完全可以不用Vuex來實現。所以，以下我們演示的案例只作為demo來講解Vuex，讓大家能夠輕松地搞懂Vuex的用法，不代表在實際開發(fā)中的做法。

我們先看看我們要實現的簡單計算器的效果：

（我是gif，加載有點慢）

此計算器的功能包括了簡單的加、減、乘、除運算，和一個清空數據的按鈕。

項目分析

分析一：考慮到運算的結果result和所有輸入的值enter（看下圖指示），是跟每個組件相關聯的，我們會將result和enter作為應用層的狀態(tài)（全局數據）處理，這里就會簡單使用到我們的Vuex提供的倉庫store。

分析二：每個鍵盤的按鍵，我們可以封裝成一個個自定義的組件:?<keyboard/>?

（看作16個keyboard組件）

簡單分析完畢，馬上開始我們的代碼部分，CSS部分相對簡單，不在此展開講解。

第1步：安裝Vuex

老規(guī)矩，在項目中安裝Vue和Vuex，要保證Vuex在安裝之前，Vue已經成功安裝。

?<script src="js/vue.js"></script>
?<script src="js/vuex.js"></script>

第2步：創(chuàng)建倉庫store

?//創(chuàng)建倉庫store
?const store = new Vuex.Store({
??? state:{
???????result:"",//運算結果
? ? ?enter:""? //輸入的值
??? }
?});

我們剛開始分析的時候，把result和enter看作是應用層級的狀態(tài)，所以定義為倉庫store的state對象的屬性值來管理它們，初始化為空字符串。

第3步：自定義組件<keyboard/>

在Vue2.0基礎系列的第九節(jié)《掌握vue的另一個核心：組件》，我們講解過如何規(guī)劃和實現一個自定義的組件，還不了解的同學可以先從前面的章節(jié)學起。

可以看到，每個鍵盤所代表的值不一樣。分別從0~9，還有各種運算按鍵，所以我們要將這些值動態(tài)地傳入組件內部。

因此：我們可以這樣實現?<keyboard/>?組件。

?//自定義組件
?Vue.component('keyboard',{
??? //接受的參數value，代表鍵盤的值
? ?props:['value'],
??? //模板
? ?template:`<div
???????????????:data-value="value">
??????????????? {{value}}
???????????? </div>`
?});

我們添加了一個動態(tài)的屬性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步：創(chuàng)建Vue實例。

要使用Vue，就必須創(chuàng)建一個Vue實例。

?//創(chuàng)建Vue實例
?const app = new Vue({
??? //掛載元素
??? el:"#app",
?});

通過以上5步，我們做了以下準備：

? 1. 安裝了Vue和Vuex

? 2. 創(chuàng)建了倉庫store

? 3. 定義了鍵盤組件?<keyboard/>?

? 4. 頁面的布局

? 5.創(chuàng)建了Vue實例

但貌似距離實現我們的計算器，是否還有點距離。

接下來我們一步一步完善以上的代碼，將這4部分關聯起來，實現完整的計算器。

首先，我們的鍵盤區(qū)域還沒有完善，我們先來實現它。

?<div class="list">
??? 
?</div>

16個按鍵的值我們會事先定義好，放在Vue實例的data中，所以我們將Vue實例的代碼修改如下：

?//創(chuàng)建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/>?組件，實現鍵盤區(qū)域的渲染。

我們對頁面中的鍵盤區(qū)域部分代碼進行修改。

修改前：

?<div class="list">
??? 
?</div>

修改后：

?<div class="list">
??? <keyboard
? ? ? ??v-for="item in keys"
? ? ? ??:value="item">
??? </keyboard>
?</div>

我們通過?v-for?指令，將keys中的每一個值動態(tài)地傳入到?<keyboard/>?組件中去。

結合我們事先寫好的CSS樣式，我們可以看到鍵盤區(qū)域的渲染效果：

（效果圖）

但是我們也看到，鍵盤上面的幾個中文：“運算結果”和“輸入的值”不是我們想要的，我們再來修改它。

你會發(fā)現，我們需要的運算結果result和輸入的值enter是應用層的狀態(tài)，它倆被我們定義在了倉庫store上。那么問題來了，我們如何將倉庫store和vue實例關聯起來呢？

Vuex提供了store選項，允許我們將倉庫store引入到根組件，并且此跟組件的所有子組件都可以使用到倉庫store，而且子組件無需顯示的引入。有了這個機制，我們就很方便地將倉庫store和vue實例關聯起來了。

具體怎么使用呢？很簡單，我們將Vue實例的代碼修改如下：

?//創(chuàng)建Vue實例
?const app = new Vue({
??? //掛載元素
? ?el:"#app",
??? //ES6語法，相當于"store":store
??? store,
??? //.....data部分不變，此處省略.......
?});

這樣我們就可以將store引入，且能通過 this.$store 訪問到它。

好了，引入它之后，我們就來使用state中的應用層的數據result和enter。怎么使用呢？

由于計算結果result和輸入值enter經常會被?<keyboard/>?組件操作更新，所以我們這里需要使用Vue的computed計算屬性。

所以，我們給Vue實例增加計算屬性，增加一下代碼：

?//創(chuàng)建Vue實例
?const app = new Vue({
???
??? //.....其他代碼不變....///
???
??? //增加計算屬性
? ?computed:{
? ? ??result(){
? ? ? ??//通過this.$store獲取倉庫的數據result
? ? ? ??return this.$store.state.result;
? ? ??},
? ? ??enter(){
? ? ? ?//通過this.$store獲取倉庫的數據result
? ? ? ??return this.$store.state.enter;
? ? ??}
??? }
?});

我們成功地將倉庫的狀態(tài)result和enter關聯到了我們的實例中的計算屬性result和enter，這樣，每當倉庫中的運算結果result和輸入值enter發(fā)生了變化，實例中的計算屬性result和enter也會做出響應式更新。

我們把計算屬性result和enter綁定在html上，來渲染我們的頁面。修改的部分如下，修改前：

?<div class="result">運算結果</div>
?<div class="enter">輸入的值</div>

修改后：

?<div class="result">
??? 
??? {{ result }}
?</div>
?<div class="enter">
??? 
??? {{ enter === ""?0:enter}}
?</div>

由于業(yè)務需要，輸入的值默認為0，所以我們做了簡單的三元運算，當ente為空字符串的時候，我們在頁面上顯示：0。

我們此時看到的頁面效果：

（效果圖）

似乎離我們的計算器越來越近了，但我們點擊任意一個鍵盤的時候，似乎還沒有任何反應。

接下來，我們就來完成最后一步：點擊鍵盤，對倉庫store的狀態(tài)result和enter進行修改。

我們上一節(jié)說過，在Vuex中不能任意修改應用層的狀態(tài)，要修改，就得用它提供的唯一途徑：通過commit提交mutation。

沒問題，提交就提交嘛，那還不簡單。

當用戶點擊鍵盤的時候，我們就提交一個mutation，并把當前按的鍵的值傳過去。為此，我們修改?<keyboard/>?組件的代碼。

修改后如下：

?//定義組件
?Vue.component('keyboard',{
??? props:['value'],
??? //點擊事件的監(jiān)聽處理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)
? ? ?}
??? }
?});

增加了監(jiān)聽點擊事件的處理函數getKeyboardValue，我們會提交一個名為calculate的mutation給倉庫，并將當前按鍵的值一起提交過去。

哦，別忘了，我們的倉庫還沒有定義名為calculate的mutations，趕緊去定義一個。

我們將倉庫store的代碼完善一下。修改后，如下：

?//創(chuàng)建倉庫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中的狀態(tài)，由于Vue實例的計算屬性是依賴倉庫store的狀態(tài)的，所以一旦狀態(tài)被修改，計算屬性就會重新計算，從而更新視圖。

看流程圖會更加清晰：

（流程圖）

我們最后來看看計算器的效果：

（我是gif，加載有點慢）

由于我們的項目中使用了vue，瀏覽器安裝了vue-devtool的同學可以打開控制臺，清晰地看到整個計算器應用的組件狀態(tài)的變化，方便調試。

（vue-devtool面板）

整個案例我們就介紹完了，如果看完云里霧里的話，別慌，這很正常，你必須花時間去敲上幾遍代碼，才能理解滴更加深刻。

如果對里面的語法還存在不明白的同學，可以再復習我們前面章節(jié)的基礎知識，這個案例的所有知識在前面的教程中通俗易懂的講解。

代碼，還得多敲，看是看不懂的！

總結

以上是生活随笔為你收集整理的【vue2.0进阶】案例：用Vuex实现一个简单的计算器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java写的学生信息查询系统_Java编
下一篇：云炬创业政策学习笔记20210104