JS每日一題：什麼情況下適合使合vuex？Vuex使用中有幾個步驟？

Vuex · 發表 2019-02-21 10:21:18

摘要： 20190121 什麼情況下適合使合vuex？Vuex使用中有幾個步驟？開始之前先簡單瞭解一下vuex 定義: vuex是一個狀態管理機制,採用集中式儲存應用所有元件的狀態嗯，就是一句話能說明白的，沒明白的，我們用程式碼再理解一下什麼叫集中式式儲存比如下面這段程式碼，...

20190121

什麼情況下適合使合vuex？Vuex使用中有幾個步驟？

開始之前先簡單瞭解一下vuex

定義: vuex是一個狀態管理機制,採用集中式儲存應用所有元件的狀態

嗯，就是一句話能說明白的，沒明白的，我們用程式碼再理解一下什麼叫集中式式儲存

比如下面這段程式碼，同時需要用到username，那麼我們首先能想到就是在兩個元件內都進行一次獲取username的操作, 這種操作是有明顯弊端的, 如頻寬資源浪費，程式碼不好維護等等

// a.vue
<template>
<div>{{username}}</div>
</template>

// b.vue
<template>
<div>{{username}}</div>
</template>

那麼集中式是什麼概念呢，就是把整個應用的狀態獨立出來當成一個樹形結構管理，所有葉子資料的更改都使用唯一的通道進行操作，下面用程式碼再來理解一下

// a.vue
<template>
<div>{{username}}</div>
</template>

// b.vue
<template>
<div>{{username}}</div>
</template>

<script>
computed: {
username () {
// store就是我們應用的集中管理器,跟元件解藕，需要的時候就用到，叫即插即用
return store.state.count
}
},
</script>

什麼情況下適合使合vuex

老生常談的話題，每個人的使用動機不同可能結果就不同，站在系統架構的角度上來，vuex雖然能很好幫助我們管理狀態, 但隨之也帶來更多的概念讓我們花時間來消化，一般情況下我們會根據專案的實際大小來決定是否需要引入vuex

Vuex使用中有幾個步驟

先上一張圖理解一下vuex工作的流程

從圖中我們可以看到vuex包含了3個關鍵詞

state
actions
mutations

只要知道就行，後面再展開講

先看下最簡單使用vuex的方式

// store.js
// store中管理store以及mutations, 然後在元件中通過commit來觸發store中mutations的方法
const store = new Vuex.Store({
state: {
name: 'JS'
},
mutations: {
updateName (state) {
state.name = 'JS每日一題'
}
}
})

// a.vue
store.commit('updateName') // JS每日一題

state

字面意思就是狀態，上面也說了vuex是集中式管理，那麼在這裡就理解成為集中管理的狀態(全域性可使用狀態)

元件中獲取狀態可以通過以下方式

const Demo = {
template: `<div>{{ name }}</div>`,
computed: {
name () {
return store.state.name
}
}
}

// 也可以通過mapState 輔助函式來獲取

computed: mapState({
name: state => state.name
})

// 引入多個state可以通過物件展開運算子來獲取
computed: {
...mapState({
name
// ...
})
}

mutations

更改vuex中的store的唯一途徑就是mutation,且必須是同步函式

程式碼理解

// 首先mutations 是一個物件
// 下面的updateName 展開寫就是 updateName : function(){}, 在vuex叫做Type Handler
// 根據上一條的解釋，所以會看到很多mutations的寫法類 [GET_USER_INFO] : (state) => {}
// 你不能直接呼叫mutations.updateName, 因為mutations 只負責註冊事件,需要通過store.commit(type) 來喚醒對應type的handler
// Mutation 需遵守 Vue 的響應規則,也就是說沒有被Object.defineProperty 劫持到的state不會響應式, 比如你有一個state為obj = {}, 然後你通過mutation來為obj新增一個屬性，
這時候你需要替換原有的obj元件才會正常響應，
常用的方式可以通過Object.assign()
mutations: {
updateName (state) {
state.name = 'JS每日一題'
}
}

// 元件中可以通過mapMutaions 輔助函式來對映關係
// 下面等同於 this.updateName()this.$store.commit('updateName')
methods: {
...mapMutaions([
'updateName',
...
])
}

Action

Action 類似於 mutation，提交的是 mutation，而不是直接變更狀態。簡單來說就是mutation只負責同步操作，action負責非同步操作

mutations: {
updateName (state) {
state.name = 'JS每日一題'
}
},
actions: {
// context是一個具有store 例項相同方法和屬性的物件
getUserInfo (context) {
setTimeout(() => {
commit('updateName')
}, 1000)
}
}

// 元件中可以通過mapActions 輔助函式來對映關係
// 下面等同於 this.getUserInfo()this.$store.commit('getUserInfo')
methods: {
...元件中可以通過mapActions([
'getUserInfo',
...
])
}

總結

vuex是一種狀態管理機制，將全域性元件的共享狀態抽取出來為一個store，以一個單例模式存在，應用任何一個元件中都可以使用，vuex更改state的唯一途徑是通過mutation，mutation需要commit觸發, action實際觸發是mutation，其中mutation處理同步任務，action處理非同步任務

關於JS每日一題

JS每日一題可以看成是一個語音答題社群

每天利用碎片時間採用60秒內的語音形式來完成當天的考題

群主在次日0點推送當天的參考答案

注絕不僅限於完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點選加入答題