Vuex複習 簡單demo

2022-07-18 19:45:22 字數 1946 閱讀 1795

原本覺得自己之前已經學過vuex了,要不直接上手webpack試一下(iview元件庫作者的《vue.js實戰》裡是這樣安排的),但是實在頭疼,

不清楚是不是webpack版本還是配置的問題,跑起來一直報錯...(版本裝的跟書上的也一樣,甚至webpack-dev-server版本也一樣),改了埠、重灌了node...

然後在任務管理器中找到這兩個程序:

關掉,再重啟(可以在cortana裡搜尋)

然後應該就沒問題了(我自己摸索的,可能還會有奇怪的我沒遇到的問題)

接下來是vuex

開啟node命令列,cd desktop(感覺這樣很好找?),然後輸入vue init webpack

因為只是複習vuex,所以沒安其他的東西

store資料夾是我們自己新建的,需要建立在src目錄下,同時在store目錄內建立乙個index.js作為vuex的例項

在vuex例項中進行匯入、vuex的啟用、新建store、state、count(要觀測的那個變數)以及匯出

注意在main.js中的修改,在vue例項中新增store

測試一下最簡單的基本獲取:

但大部分時候都不可能直接使用獲取來的值,就好像vue中的computed屬性一樣需要將資料進行一定的加工才會顯示出來,這時候就需要用到getters

getters屬性中的函式傳入的引數是上面建立的state屬性值(乙個物件?)

使用this.$store.getters.getcount獲取

那如果要修改資料嘞?vuex是不是還這麼厲害?

在helloworld.vue檔案中新增兩個按鈕(注意要新增在已有的div中,乙個單檔案元件中只能有乙個根元素)

在store中新增mutations屬性,mutations 可以直接操作(mutate) state 中的資料,可以定義 state 中的資料如何被改變

但實際上直接通過mutations來運算元據是不那麼好的,當然具體理由我還不太清楚...

更為推薦的方法是先提交乙個actions,然後給store提交乙個修改事件(類似於觀察者模式?),再由mutations進行修改

這樣寫的話,當點選按鈕,並不直接修改資料,而是觸發(dispatch)乙個store中actions內的處理函式,並將引數傳入,

在actions的處理函式內(context是乙個和store例項一模一樣的物件),會提交(commit)並觸發乙個對應的mutations內的處理函式  ~

vuex的理解以及簡單的demo實現

存 mutations 只能由它來操作state 中 actions 處理非同步任務給mutation 取 getters 類似計算屬性,依賴state資料 庫 state 即資料來源 注意 解構出來的方法只能有乙個引數,如果有多個要傳遞,可以使用陣列或者物件。import computed met...

vuex 狀態管理模式 最簡單的demo

vuex可以這樣理解 他就是乙個可供所有頁面呼叫的全域性資料。第二步 在src檔案路勁下建立乙個叫 store的資料夾 在store資料夾下建立index.js檔案。第三步 在store資料夾下的inndex.js檔案寫 import vue from vue import vuex from vu...

Vuex使用方法(demo)

1 什麼是vuex?2 初始化vuexcnpm i vuex d 2 建乙個store資料夾 store index.js 初始化vuex import vue from vue import vuex from vuex 引入module vue.use vuex 生成乙個vuex例項 expor...