付費限定

[9] State management

更新於 發佈於 閱讀時間約 1 分鐘

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

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

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

state

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

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

raw-image

state 裡面定義變數

mutation

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

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

以行動支持創作者!付費即可解鎖
本篇內容共 673 字、0 則留言,僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
留言
avatar-img
留言分享你的想法!
avatar-img
張哲嘉的沙龍
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
張哲嘉的沙龍的其他內容
2022/10/10
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定,然後再做個連結到 nginx/sites-enabled,設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定,然後再做個連結到 nginx/sites-enabled,設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
Block direct access by ip 一旦將網站對外,就要開始面對這個險惡的世界每天遭受一堆攻擊,雖然大部分都無關痛癢,幾乎都是機器人在 scan ip 然後在發一些無意義的請求,或者亂試 api,看能不能試出來...,最好是哪麼好試啦,而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
Block direct access by ip 一旦將網站對外,就要開始面對這個險惡的世界每天遭受一堆攻擊,雖然大部分都無關痛癢,幾乎都是機器人在 scan ip 然後在發一些無意義的請求,或者亂試 api,看能不能試出來...,最好是哪麼好試啦,而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內,包含了 SECRET_KEY 等機密資訊,通常專案都會做版本控制上 git,但把這些機密資訊也上 git 是很不好的一件事,畢竟 github 也是曾經被駭過的,所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
2022/10/10
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內,包含了 SECRET_KEY 等機密資訊,通常專案都會做版本控制上 git,但把這些機密資訊也上 git 是很不好的一件事,畢竟 github 也是曾經被駭過的,所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
HTTP通訊協定不會持續保持連線和保留客戶端的使用者狀態,因此需要將使用者狀態傳遞下去,以便保留使用者狀態,稱為「狀態管理」(State Management)。 客戶端: 此部份是將資料存在使用者電腦或HTML網頁或標籤中,以便傳遞。常用方法如下: 表單欄位:使用HTML表單欄位內容傳遞資料
Thumbnail
HTTP通訊協定不會持續保持連線和保留客戶端的使用者狀態,因此需要將使用者狀態傳遞下去,以便保留使用者狀態,稱為「狀態管理」(State Management)。 客戶端: 此部份是將資料存在使用者電腦或HTML網頁或標籤中,以便傳遞。常用方法如下: 表單欄位:使用HTML表單欄位內容傳遞資料
Thumbnail
State management 首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management,檔案位置在 src/store/index.ts Login 接下來我們來寫一下登入頁面在 src/components/login.vue ,以下是 sc
Thumbnail
State management 首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management,檔案位置在 src/store/index.ts Login 接下來我們來寫一下登入頁面在 src/components/login.vue ,以下是 sc
Thumbnail
狀態管理有點像是 cookie 或 localStorage,可是又多了更多操作可以用,讓你再切換頁面時可以使用相同的變數。 用來使用這個功能的套件叫做 vuex 以下不是狀態管理全部的功能,但是最常在用的其實就是這些 state 首先先來定義一個可以在各個網頁頁面取用的變數吧 所有的狀態管理設定
Thumbnail
狀態管理有點像是 cookie 或 localStorage,可是又多了更多操作可以用,讓你再切換頁面時可以使用相同的變數。 用來使用這個功能的套件叫做 vuex 以下不是狀態管理全部的功能,但是最常在用的其實就是這些 state 首先先來定義一個可以在各個網頁頁面取用的變數吧 所有的狀態管理設定
Thumbnail
今天來介紹 vue 的生命週期,什麼是生命週期呢?講簡單一點就是從你用瀏覽器打開網頁開始,到網頁內的元件一個一個生成,到整個完整的網頁建立的過程就叫生命週期,完整過程如下圖 是不是眼花撩亂啊?讓我簡化一下,其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
Thumbnail
今天來介紹 vue 的生命週期,什麼是生命週期呢?講簡單一點就是從你用瀏覽器打開網頁開始,到網頁內的元件一個一個生成,到整個完整的網頁建立的過程就叫生命週期,完整過程如下圖 是不是眼花撩亂啊?讓我簡化一下,其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
Thumbnail
v-bind v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數,舉個例子 可以改寫成這樣 最後效果是一樣的,在標籤內 v-bind 可以簡寫成 : v-model 上一篇已經提到了,就是可以透過網頁上的操作去改變資料的值,比方說表單、輸入欄等等。 v-for 迴圈,
Thumbnail
v-bind v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數,舉個例子 可以改寫成這樣 最後效果是一樣的,在標籤內 v-bind 可以簡寫成 : v-model 上一篇已經提到了,就是可以透過網頁上的操作去改變資料的值,比方說表單、輸入欄等等。 v-for 迴圈,
Thumbnail
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
Thumbnail
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Thumbnail
Zustand是什麼?React前端狀態管理 分別講解狀態管理以及Zustand 是什麼?接續下來講解Zustand用法以及Context以及Redux的比較。
Thumbnail
Zustand是什麼?React前端狀態管理 分別講解狀態管理以及Zustand 是什麼?接續下來講解Zustand用法以及Context以及Redux的比較。
Thumbnail
data() method 續上篇,這邊修改一下HomeView.vue的code。 Before: After: 在頁面最下方顯示 name: Vic,data method直接回傳name變數,在<template>中可以直接用{{ name }}將變數顯示出來。 結果如下: v-model
Thumbnail
data() method 續上篇,這邊修改一下HomeView.vue的code。 Before: After: 在頁面最下方顯示 name: Vic,data method直接回傳name變數,在<template>中可以直接用{{ name }}將變數顯示出來。 結果如下: v-model
Thumbnail
S1.建立資料庫 user S2.建立 index.htm a.載入 vue.js、jquery、bootstrap b.版面建立 S3.vue.js程式 新增、查看列表、互動視窗、修改、刪除 index.htm VueControl.js 原碼:https://reurl.cc/e3k8yL
Thumbnail
S1.建立資料庫 user S2.建立 index.htm a.載入 vue.js、jquery、bootstrap b.版面建立 S3.vue.js程式 新增、查看列表、互動視窗、修改、刪除 index.htm VueControl.js 原碼:https://reurl.cc/e3k8yL
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News