Vuex專案Example中的原始碼學習(1)

2022-06-23 19:03:10 字數 1635 閱讀 4264

目錄

npm install
可能會遇到錯誤如下

[email protected] install: `node install.js`
可以執行

npm install --ignore-scripts

npm run dev

專案就可以跑起來。通過http://localhost:8080就可以訪問到專案。

專案其實非常簡單,就是點選加號數字可以新增,然後可以檢測到數字是奇數還是偶數。後面兩個按鈕,分筆是如果是奇數的加1,另外一個是非同步增加數字。

在開始閱讀**之前,不妨大膽的揣測下實現的思路。然後再對照**,學習改進。

該demo是關於vuex的**。那麼實現不用說一定是vuex來實現的。那麼專案實現的大概思路應該是使用一個 vuex的state來記錄count,然後再mutations中可以實現一個increment方法和decrement 方法。點選按鈕的時候就可以增加或者減少count的值。然後需要一個可以實時監測著count 是技術還是偶數的操作,這個可以用getters來實現。至於後面的兩個按鈕。第一個可以在mutations中寫一個方法來判斷並且新增,也可以在actions中增加方法來實現。最後一個按鈕是非同步的,只能在actions中去實現。根據專案結構,我們應該不難揣測出來vuex的**記錄在store.js中。counter.vue實現了介面對vuex的資料呼叫。

// store.js

import vue from 'vue'

import vuex from 'vuex'

vue.use(vuex)

const state =

const mutations = ,

decrement (state)

}const actions = ) => commit('increment'),

decrement: () => commit('decrement'),

incrementifodd ()

},incrementasync () , 1000)

})}}

const getters =

export default new vuex.store()

在store.js中實現的和我揣測的差別不大。

需要注意的:

如果把vuex得**寫在分開的類中,然後被其他類引入,我們需要用export default的語法來實現。

例子中的**在actions中有把mutations中的進行了封裝。

+-increment if odd

increment async

在counter.vue中實現的對vuex的呼叫。我們可以學習到如何簡單的把actions引入到呼叫的元件中來。mapgetters和mapactions的使用。

如果把vuex得**寫在分開的類中,然後被其他類引入,我們需要用export default的語法來實現。

例子中的**在actions中有把mutations中的進行了封裝。

mapgetters和mapactions的使用。

demo非常簡單。入門第一個。