【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">
??????????? <!--鍵盤區(qū)域-->
??????? </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">
??? <!--鍵盤區(qū)域,還沒實現-->
?</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">
??? <!--鍵盤區(qū)域-->
?</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-->
??? {{ result }}
?</div>
?<div class="enter">
??? <!--綁定計算屬性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é)的基礎知識,這個案例的所有知識在前面的教程中通俗易懂的講解。
代碼,還得多敲,看是看不懂的!
推薦
擴展閱讀
?原創(chuàng)教程:《ECMAScript 6 系列》
?原創(chuàng)教程:《Vue2.0基礎系列》
?附加習題:《ECMAScript 6 系列》的 2套
?附加習題:《Vue2.0基礎系列》的 1 套
關于職場
?職場感悟:混口飯吃,談不上喜歡
?薪資待遇:那么點工資,能招到人嗎?
?鄭州招聘:招聘前端3~5人
?廣州招聘:招聘前端2人
資源推薦
其實學好技術并不難,架構師免費分享全網全套最新web前端、JavaScript、HTML5、PHP、數據庫……等視頻資料!
[總價值超3萬!]年薪35萬以上的大牛幾乎都看了!
加微信:?abc15689892?免費領取,由于領取的朋友比較多,所以加微信時一定要備注:555,否則很難通過。
??
總結
以上是生活随笔為你收集整理的【vue2.0进阶】案例:用Vuex实现一个简单的计算器的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java写的学生信息查询系统_Java编
- 下一篇: 云炬创业政策学习笔记20210104