我是歌謠 放棄很容易 但是堅持一定很酷

前言

每次做開發遇到一個新的知識點
總要思索著如何去實現這個新東西

最近來大概講講Vuex
vuex是前端用的比較多的一個東西之一
通過一張圖了解一下原理

原理和vuex產生原因

看完了整個的原理之后

安裝就直接過去了 就是包管理工具

初始化

安裝一下

import Vue from ‘vue’
import Vuex from ‘vuex’
?
Vue.use(Vuex)
?
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
?

調用時候

store.commit(‘increment’)
?
console.log(store.state.count) // -> 1

這樣就進行了數據的改變

接下面我們看看常用的屬性

state

首先將實例掛載在vue上面

獲取值

const Counter = {
template: <div>{{ count }}</div>,
computed: {
count () {
return this.$store.state.count
}
}
}
?

可以用簡單的寫法

就是映射函數

mapState

computed: {
…mapState({
bugFixData: state => state.overview.bugFixData
})
},

getter

getter適用于平時的計算

const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: ‘…’, done: true },
{ id: 2, text: ‘…’, done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
?

類似于一種狀態的處理

取值直接

store.getters.doneTodosCount // -> 1

也可以用映射函數進行數據處理

mapGetter

mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性：

?
import { mapGetters } from ‘vuex’
?
export default {
// …
computed: {
// 使用對象展開運算符將 getter 混入 computed 對象中
…mapGetters([
‘doneTodosCount’,
‘anotherGetter’,
// …
])
}
}
?
如果你想將一個 getter 屬性另取一個名字，使用對象形式：
?
…mapGetters({
// 把 this.doneCount 映射為 this.$store.getters.doneTodosCount
doneCount: ‘doneTodosCount’
})
?

接下來繼續說說

mutation

修改狀態的

提交一個參數

const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 變更狀態
state.count++
}
}
})
?

單個參數直接

store.commit(‘increment’)

多個參數負載

mutations: {
increment (state, payload) {
state.count += payload.amount
}
}

映射函數

mapMutations

import { mapMutations } from ‘vuex’
?
export default {
// …
methods: {
…mapMutations([
‘increment’, // 將 this.increment() 映射為 this.$store.commit('increment')
?
// mapMutations 也支持載荷：
‘incrementBy’ // 將 this.incrementBy(amount) 映射為 this.$store.commit('incrementBy', amount)
]),
…mapMutations({
add: ‘increment’ // 將 this.add() 映射為 this.$store.commit('increment')
})
}

可以通過聲明常量來實現數據的處理

// mutation-types.js
export const SOME_MUTATION = ‘SOME_MUTATION’
?
// store.js
import Vuex from ‘vuex’
import { SOME_MUTATION } from ‘./mutation-types’
?
const store = new Vuex.Store({
state: { … },
mutations: {
// 我們可以使用 ES2015 風格的計算屬性命名功能來使用一個常量作為函數名
[SOME_MUTATION] (state) {
// mutate state
}
}
})
?

接下來 說一下

action

action提交的是mutation 而不是其他異步操作

action可以包含任意異步操作

store.dispatch進行觸發

store.dispatch(‘increment’)

action下面執行異步操作

actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit(‘increment’)
}, 1000)
}
}

mapAction

使用mapaction映射函數進行書寫

import { mapActions } from ‘vuex’
?
export default {
// …
methods: {
…mapActions([
‘increment’, // 將 this.increment() 映射為 this.$store.dispatch('increment')
?
// mapActions 也支持載荷：
‘incrementBy’ // 將 this.incrementBy(amount) 映射為 this.$store.dispatch('incrementBy', amount)
]),
…mapActions({
add: ‘increment’ // 將 this.add() 映射為 this.$store.dispatch('increment')
})
}
}
?

組合式action

// 假設 getData() 和 getOtherData() 返回的是 Promise
?
actions: {
async actionA ({ commit }) {
commit(‘gotData’, await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch(‘actionA’) // 等待 actionA 完成
commit(‘gotOtherData’, await getOtherData())
}
}
?

接下來說說module

module

const moduleA = {
state: () => ({ … }),
mutations: { … },
actions: { … },
getters: { … }
}
?
const moduleB = {
state: () => ({ … }),
mutations: { … },
actions: { … }
}
?
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
?
store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態
?

大概就是這些了 學會閱讀文檔還是比較重要的

英語也是比較重要的 我是歌謠 放棄很容易 但是堅持一定很酷

總結

以上是生活随笔為你收集整理的如何开始了解一个新知识（Vuex）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。