[Vue.js] Vuex-新手上路-自store 中取得與修改資料(state)

# 3. getter（computed） · 加工資料呈現 · 同computed 一樣會被緩存、依賴值變更了才會重新計算 ... Eudora FrontendDeveloperTaipeiCity,Taiwan TaipeiCity,Taiwan [email protected] [email protected] GitHub:eudora-hsjLinkedIn:eudora-huangTwitter:eudora_hsjMedium:eudora-hsjbookTableofContents無Vuex時資料傳遞的作法Vuex的運作原理與流程Vuex的組成核心-store倉庫1.state（data）2.action（methods）3.getter（computed）4.mutation4-1.安裝4-2.應用-從store中取state資料4-3.應用-修改store中的state資料方法1.在componet中直接修改（最好不要這這麼做）方法2.Vuex:dispatch->[action]->commit->[mutation]差異4-4.應用-getters:資料加工練習簡單的例子：DemoDevTool-Vue中的Vuex面板開啟Vuex嚴謹模式(參考資料)comment Comments [Vue.js]Vuex-新手上路-自store中取得與修改資料(state) [Vue.js]實例-SlidesShow圖片輪播切換 | [JS]複製Array/Object的幾種常用方法（深/淺拷貝） (Updated:2021-07-11) 2021-04-27 示例透過Vuex讀取與修改store內的state。

適用:會基本的Vue應用（使用data/computed/method/插值...等）#無Vuex時資料傳遞的作法上傳下：propsin 下傳上：emitout 同層級：eventbus（簡單情境,資料量不大時） 或是透過全域變數，但是全域變數無法雙向綁定 (可參考無Vuex的Components間的各種資料傳遞)#Vuex的運作原理與流程在component中以dispatch方法去觸發action事件action裡處理同步/異步（如ajax/setTimeout..等）事件操作 （需要打API來取得資料的話，也在此處理） 並將資料commit至mutation讓mutation去改變State(資料)state再回應到component裡進行Render#Vuex的組成#核心-store倉庫component從store中讀取資料狀態(state)#1.state（data）響應式的資料狀態儲存,資料狀態變化時，有用到的component都會即時更新#2.action（methods）操作同步或異步事件的處理但不直接修改資料（state）是透過commit→呼叫mutation改變state#3.getter（computed）加工資料呈現同computed一樣會被緩存、依賴值變更了才會重新計算#4.mutation改變state只處理同步函數：不要在這進行非同步的動作（例如setTimeout/打API取遠端資料...等）以下以CLI環境為例#4-1.安裝#安裝安裝Vuex:npminstallvuex--save/yarnaddvuex引入至專案src/main.js  ... importVuexfrom'vuex' Vue.use(Vuex) #4-2.應用-從store中取state資料#Step1.src下新增檔案store/index.jssrc/store/index.jsimportVuefrom'vue' importVuexfrom'vuex' Vue.use(Vuex) exportdefaultnewVuex.Store({ state:{ test:'testdata' } }) 修改src/main.js  importstorefrom'./store' ... ... newVue({ el:'#app', store,//->store:'store' ... }) ... #Step2.computed內增加取得資料的方法component-script內以this.$store.state.＿＿取得store內的資料 ... computed:{ test(){ returnthis.$store.state.test } } ... component-template引入{{test}} #4-3.應用-修改store中的state資料#方法1.在componet中直接修改（最好不要這這麼做）例：Change  <...> ... changeHandler(){ this.$store.state.test='balabala' } 或<...> #方法2.Vuex:dispatch->[action]->commit->[mutation]Step1.stroe/index.js增加actions與mutations物件   ... exportdefaultnewVuex.Store({ state:{ ... }, actions:{ }, mutations:{ }, }) Step2.定義actions與mutationaction裡將接收到的資料commit至mutationmutation內將actioncommit進來的資料傳給state（修改state）      ... actions:{ updateTest(context,status){ context.commit('TEST',status)//mutation中定義方法 } }, mutations:{ TEST(state,status){//status->payload（載荷） state.test=status; } }, ... 關於Action(opensnewwindow)｜關於Mutation(opensnewwindow)Step3.component中修改資料的方式改寫用dispatchdispatch觸發action事件,並傳遞內容 <...> ... changeHandler(){ this.$store.dispatch('updateTest','balabala') } <...> #差異應避免使用方法1,（從DevToolVue工具裡的Vuex裡觀察，方法1並沒有修改到storestate） #4-4.應用-getters:資料加工Step1.getters中新增一個方法與回傳值（同computed用法）   ... exportdefaultnewVuex.Store({ state:{ text:'...' }, actions:{ ... }, mutations:{ .... }, getters:{ textLength:state=>{ returnstate.test.length } } }) Step2.component中$store.getters.___可直接取得資料{{$store.getters.textLength}} #練習簡單的例子：先載入預設的名字計數名字字數使用者輸入新名字按下Enter後修改名字。

計數名字字數也應及時更新#Demo>CodeSandbox(點左上角選單按鈕可以展開目錄欄，瀏覽檔案)#DevTool-Vue中的Vuex面板有透過action跟mutation操作，會多了mutation欄位,且也能紀錄變化歷程#開啟Vuex嚴謹模式stroe/index.js 開啟嚴謹模式：strict:true exportdefaultnewVuex.Store({ strict:true, state:{ ... }, ... }) 嚴謹模式下，若你在mutation之外的地方直接改變state內容，會出現error（在component內或action內寫都不行！）#(參考資料)Vuex是什么？|Vuex(opensnewwindow)Vue出一個電商網站-第13節Vuex(opensnewwindow) [Vue.js]Vuex-新手上路-自store中取得與修改資料(state) [Vue.js]實例-SlidesShow圖片輪播切換 | [JS]複製Array/Object的幾種常用方法（深/淺拷貝）