付費限定

[9] State management

張哲嘉

2022/10/06閱讀時間約 1 分鐘

狀態管理有點像是 cookie 或 localStorage，可是又多了更多操作可以用，讓你再切換頁面時可以使用相同的變數。

用來使用這個功能的套件叫做 vuex

以下不是狀態管理全部的功能，但是最常在用的其實就是這些

state

首先先來定義一個可以在各個網頁頁面取用的變數吧

所有的狀態管理設定都是寫在 src/store/index.ts

在 state 裡面定義變數

mutation

再來定義一個可以改變 state 裡面變數的值的方法，方法要寫在 mutations 內

方法的第一個參數是代表狀態管理裡面的 state，第二個參數之後就看你怎麼玩，像我這裡是寫一個方法，state 內的 variable1 會被改變成方法的第二個參數

Support the creator with action! Pay to unlock

本篇內容共 673 字、0 則留言，僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你You currently cannot view the following content, possibly because you are not logged in or do not have permission to view the room.

#網頁開發

張哲嘉的沙龍Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你

張哲嘉的沙龍

9會員

49Content count

比起詳細教學單一技能，網路上或者市面上整合多項技能的教學相對少很多，但要真的完成一項專案往往不是只靠一項技能便能做到。而且教科書式的完整教學也比較枯燥乏味，因此我想以自身的經驗為例，以全端開發各項技能中最常用到的部分進行講解，讓讀者能夠快速上手掌握全端技能。

留言0

查看全部

發表第一個留言支持創作者！

張哲嘉的沙龍的其他內容

[8] Vue Router

Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由，name 如果你沒有要用路由傳參，不寫也沒關係，component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像，用法是像

#網頁開發

[7] Vue: Life cycle

今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖在加上 setup 語法糖的 script 標籤內做的事相當於在 be

#網頁

[6] Vue 指令

v-bind v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數，舉個例子可以改寫成這樣最後效果是一樣的，在標籤內 v-bind 可以簡寫成 : v-model 上一篇已經提到了，就是可以透過網頁上的操作去改變資料的值，比方說表單、輸入欄等等。 v-for 迴圈，

#網頁開發

[5] 寫一個 Vue 頁面

定義路由首先先來定義路由，先把上一篇寫的 home.vue 定義在根路由。打開 src/router/index.ts，在 routes 內定義 path 定義 url，component 定義要指向哪個 vue 頁面，component:()=>import('@/components/hom

#網頁開發

[4] Vue 頁面結構

在寫頁面之前，先來介紹 Vue 頁面結構。首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像，一樣是分成寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。 template 就是相當於原生 html 檔

#網頁開發

[3] Vue 專案架構

專案建好了，那先來講 Vue 的專案架構詳細內容很多，所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .

#網頁開發

Fed 9月會議：傳達「不想要落後給曲線」的正向信號，著手管理市場的衰退預期

重點摘要： 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近

#聯準會 #Fed #降息

方格子 vocus 官方沙龍

2024/08/27

「相簿裡最捨不得刪的 N 張照片！」：完成任務抽富士即可拍！

近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！

#相簿裡最捨不得刪的照片

冰晶熊的雪地

2024/06/06

9 個跡象顯示你是 ISTP

ISTP，即內向型、感知型、思考型、感知型，以其理解事物運作方式的內在能力而聞名。 ISTP 通常被稱為「藝術大師」人格，他們擁有獨特的多種特質，使他們能夠以務實和超然的精確度度過生活。他們對探索和建造的濃厚興趣使他們成為邁爾斯-布里格斯類型指標（MBTI）性格中最傾向於機械的人。如果你常發現自己拆