iT邦幫忙

0

Vuex 最簡單的使用方式?(適合剛學vue的初學者)

  • 分享至 

  • xImage

我的程度

有請google大神幾次 看了一個鐘頭覺得大家都寫的超複雜 而且我不確定是不是該用vuex

XD

目前有一個需求想要把某個A組件(vue檔)的資料在進入首頁(登入)後就立刻計算並回傳到首頁提供顯示?

然而我在A組件的created生命週期寫上 >利用api取得的資料存進sessionStorage

因為首頁並沒有使用到A組件 所以連created都不給你出

模擬開始

A組件裡面的一個data叫做dataAPI 他接了一個API 會得到數字3

我在進入首頁後 沒有使用到A組件 但想取得A組件的dataAPI值

模擬結束

請問是否就是用 Vuex來實現?

如果是 要如何用最簡短的程式碼實現?

看更多先前的討論...收起先前的討論...
dragonH iT邦超人 5 級 ‧ 2020-02-07 16:31:08 檢舉
所以你選擇不在會用到組件A的地方 call api 的原因是?

基本上跨 component 就可以考慮用 vuex

因為用 props 可能不會比較簡潔

A組件假設利用api call四封信件出來 然而後端沒有寫到計算幾封信件這個api或不想麻煩他們
我是否可以直接在首頁統計出這個組件有幾封信?
我就直覺是vuex阿 因為我還沒學到這邊 但是我已經產生跨組件抓資料的需求了
而且我不只要跨組件 我還須要他別的組件已經先計算過才回傳資料
froce iT邦大師 1 級 ‧ 2020-02-07 16:36:57 檢舉
你的思考方向反了,你應該一開始在首頁就接dataAPI,然後存到vuex裡,等到A組件要操作/修改數據後再更改data。

vuex是提供一種跨組件的公用變數,但是因為是跨組件公用,如果直接改變,容易造成變數不同步的問題。
所以他叫狀態,會記錄上次變動的值,必須透過非同步的action提交動作,最後透過mutation把值commit進去。
XDD 先謝謝大哥 因為我有感覺要在承蒙您照顧
-----------------
好那請問froce大 有比較簡短的code供參考嗎XD?
dragonH iT邦超人 5 級 ‧ 2020-02-07 16:39:04 檢舉
用法就是一般的用法阿

注意不要直接改 state 的值就好
froce iT邦大師 1 級 ‧ 2020-02-07 16:47:31 檢舉
只有父子孫3層的話,我應該還是會用props做啦,vuex我是覺得沒比較少code。

我是看人家的範例code
https://github.com/gtalarico/django-vue-template/tree/master/src
我好像會了 我先吸收一下 先謝謝大哥
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
dragonH
iT邦超人 5 級 ‧ 2020-02-07 16:46:39
最佳解答

codepen

用 action commit mutation

在 mutation 更改 state 的值

取值就用 state.count

看更多先前的回應...收起先前的回應...

大哥 請問一下哦 從後端拿數據渲染 一般您建議放mounted 還是created比較好?
我google到的是 created更早 早於html還沒開始生成之前
而mounted是生成之後 那為什麼網友建議放在created呢
https://blog.csdn.net/lvonve/article/details/89069544

寬鬆一點來說兩者皆可?

dragonH iT邦超人 5 級 ‧ 2020-02-08 17:13:55 檢舉

ofcourse448

created優先

但如果你的操作需要等到某個 dom render 了之後

那就放 mounted

會建議放 created 的原因是因為適用大多數的情況

例如你透過 API 取回五則 mail

然後一則 mail 想 render 一個 <span>

那就會放 created

但如果你某個 lib 需要做 initial (e.g. CKeditor)

那可能放 mounted 會比較好

Vision iT邦新手 5 級 ‧ 2020-02-09 02:35:09 檢舉

dragonH
ofcourse448

拿取數據渲染,我會當它是一個 動作行為 在組件中被執行

  • created 的概念會是初始化 component data, watch, event...
  • mounted 則是初始渲染 template ($el)完成後,即完成組件 HTML 部分後

所以要執行一個 動作行為 想必跟 template DOM 操作有關,應該是放在 mounted,而不應該是 created 喔

參考: https://segmentfault.com/a/1190000008570622

ps: 拿取數據渲染 = render loading UI -> call API -> get data -> set data -> render data UI -> remove loading UI

dragonH iT邦超人 5 級 ‧ 2020-02-09 09:32:26 檢舉

Vision

拿取數據渲染,我會當它是一個 動作行為 在組件中被執行

  • created 的概念會是初始化 component data, watch, event...
  • mounted 則是初始渲染 template ($el)完成後,即完成組件 HTML >部分後..

呃 可是我並沒有要對 dom 有直接的操作

為什麼要等他們 mounted 好呢?XD

基本上我選擇用 mounted 的時候

是在我需要對某個 dom 來操作才會用

跟我上面提的範例一樣

參考1
參考2
參考3

Vision iT邦新手 5 級 ‧ 2020-02-09 16:25:50 檢舉

dragonH
好喔!
我大概懂你的意思了,我應該要分為初始化資料操作 DOM 才會更清楚得好,不能用渲染畫面的定義區分,那是 Vue 自己就會處理的

那的確單純 fetch API 是放在 created 會更好些。 感謝你!/images/emoticon/emoticon37.gif

Vision iT邦新手 5 級 ‧ 2020-02-09 16:31:36 檢舉

最後一個參考很棒誒,我就收下了

dragonH iT邦超人 5 級 ‧ 2020-02-09 16:31:36 檢舉

Vision

大家一起討論一起進步 /images/emoticon/emoticon12.gif

吃瓜看戲中

謝謝兩位大哥的講解 小弟又進步了

我要發表回答

立即登入回答