付費限定

[9] State management

張哲嘉

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

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

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

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

state

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

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

在 state 裡面定義變數

mutation

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

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

以行動支持創作者！付費即可解鎖

本篇內容共 673 字、0 則留言，僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容，可能因為尚未登入，或沒有該房間的查看權限。

#網頁開發

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

張哲嘉的沙龍

9會員

49內容數

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

留言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，最後才是進入你寫的 .

#網頁開發

「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！

這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～

#天天秋嗨嗨 #秋季旅遊 #秋季穿搭

MimiVsJames的美股投資分享

2024/11/13

11/20 NVDA財報前Preview, 財報前股價波動走勢觀察

11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從

#美股 #美股投資 #投資理財

Ethan的沙龍

2024/02/27

維持皮膚健康與活力｜6款超人氣保濕、舒緩敏感化妝水評比

Hi 大家好，我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。曾經，我的保養程序簡單到只包括清潔和隨意上乳液

#保養 #產品 #分享

中年婦女的沙龍

2024/10/06

9/25(三)，起床53.6kg，睡前54.5kg，總熱量1,350cal

昨天奔波一天，晚上很好睡，一夜無夢。

超越大盤的佛系投資

2024/10/05

9月PMI驟降，台股將何去何從？數據揭示未來走勢！

9月份臺灣的PMI數據為49.2%，顯示製造業出現緊縮，較上月下降4.4個百分點，結束了連續四個月的擴張。本文將深入探討PMI與台股的關聯性，分析未來市場的趨勢。

#數據 #PMI #觀察

中年婦女的沙龍

2024/10/04

9/24(二)，起床53.7kg，睡前54.3kg，總熱量1,150cal

今天休假，早上要先去開個小刀，然後去上週約好的禮儀公司諮詢老爸的後事。

冰晶熊的雪地

2024/06/06

9 個跡象顯示你是 ISTP

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