付費限定

[9] State management

更新於 發佈於 閱讀時間約 1 分鐘
狀態管理有點像是 cookielocalStorage,可是又多了更多操作可以用,讓你再切換頁面時可以使用相同的變數。
用來使用這個功能的套件叫做 vuex
以下不是狀態管理全部的功能,但是最常在用的其實就是這些

state

首先先來定義一個可以在各個網頁頁面取用的變數吧
所有的狀態管理設定都是寫在 src/store/index.ts
state 裡面定義變數

mutation

再來定義一個可以改變 state 裡面變數的值的方法,方法要寫在 mutations
方法的第一個參數是代表狀態管理裡面的 state,第二個參數之後就看你怎麼玩,像我這裡是寫一個方法,state 內的 variable1 會被改變成方法的第二個參數
以行動支持創作者!付費即可解鎖
本篇內容共 673 字、0 則留言,僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
avatar-img
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
留言
avatar-img
留言分享你的想法!

































































張哲嘉的沙龍 的其他內容
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由,name 如果你沒有要用路由傳參,不寫也沒關係,component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像,用法是像
今天來介紹 vue 的生命週期,什麼是生命週期呢?講簡單一點就是從你用瀏覽器打開網頁開始,到網頁內的元件一個一個生成,到整個完整的網頁建立的過程就叫生命週期,完整過程如下圖 是不是眼花撩亂啊?讓我簡化一下,其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
v-bind v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數,舉個例子 可以改寫成這樣 最後效果是一樣的,在標籤內 v-bind 可以簡寫成 : v-model 上一篇已經提到了,就是可以透過網頁上的操作去改變資料的值,比方說表單、輸入欄等等。 v-for 迴圈,
定義路由 首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts,在 routes 內定義 path 定義 url,component 定義要指向哪個 vue 頁面,component:()=>import('@/components/hom
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由,name 如果你沒有要用路由傳參,不寫也沒關係,component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像,用法是像
今天來介紹 vue 的生命週期,什麼是生命週期呢?講簡單一點就是從你用瀏覽器打開網頁開始,到網頁內的元件一個一個生成,到整個完整的網頁建立的過程就叫生命週期,完整過程如下圖 是不是眼花撩亂啊?讓我簡化一下,其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
v-bind v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數,舉個例子 可以改寫成這樣 最後效果是一樣的,在標籤內 v-bind 可以簡寫成 : v-model 上一篇已經提到了,就是可以透過網頁上的操作去改變資料的值,比方說表單、輸入欄等等。 v-for 迴圈,
定義路由 首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts,在 routes 內定義 path 定義 url,component 定義要指向哪個 vue 頁面,component:()=>import('@/components/hom
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
你可能也想看
Google News 追蹤
Thumbnail
狀態管理在 Vue 應用中非常重要,尤其是當多個組件需要共享狀態時。每個 Vue 組件管理自己的響應式狀態,但隨著組件數量增加,簡單的管理方式可能變得複雜。這時,可以使用如 Pinia 的狀態管理庫來簡化這一過程。Pinia 提供了一個更簡單的 API 和更強的類型推斷,並由 Vue 核心團隊維護。
Thumbnail
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析,以及狀態和數據的區分,詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
在 Solidity 中,constant 變量用於定義不可變的常數值。這些常數在合約的生命週期內不會改變,並且它們的值必須在宣告時設定。使用 constant 關鍵字可以節省 gas,因為它們在編譯時就已經被嵌入到字節碼中,不需要在運行時讀取存儲。 用法 定義常數: 常數變量必須在宣告時初始
Thumbnail
Vue Router 動態路由,假設有一個賣場,裡面有 100 個商品,我們不可能針對它們創 100 對應的路由,因此我們需要一個動態路由,利用"路徑帶參數"的方式來撈取商品的資訊。
前言 這篇文章分享cookie、sessionStorage、localStorage、session的差異,因為前後端溝通常用的就這幾個,我比較常用的是cookie或session,但也是有可能會用到sessionStorage或localStorage的時候,因此想說這邊做個紀錄比較他們的差別
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
狀態管理在 Vue 應用中非常重要,尤其是當多個組件需要共享狀態時。每個 Vue 組件管理自己的響應式狀態,但隨著組件數量增加,簡單的管理方式可能變得複雜。這時,可以使用如 Pinia 的狀態管理庫來簡化這一過程。Pinia 提供了一個更簡單的 API 和更強的類型推斷,並由 Vue 核心團隊維護。
Thumbnail
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析,以及狀態和數據的區分,詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
在 Solidity 中,constant 變量用於定義不可變的常數值。這些常數在合約的生命週期內不會改變,並且它們的值必須在宣告時設定。使用 constant 關鍵字可以節省 gas,因為它們在編譯時就已經被嵌入到字節碼中,不需要在運行時讀取存儲。 用法 定義常數: 常數變量必須在宣告時初始
Thumbnail
Vue Router 動態路由,假設有一個賣場,裡面有 100 個商品,我們不可能針對它們創 100 對應的路由,因此我們需要一個動態路由,利用"路徑帶參數"的方式來撈取商品的資訊。
前言 這篇文章分享cookie、sessionStorage、localStorage、session的差異,因為前後端溝通常用的就這幾個,我比較常用的是cookie或session,但也是有可能會用到sessionStorage或localStorage的時候,因此想說這邊做個紀錄比較他們的差別
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil