Vuex 是什么臣嚣？
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式亭病。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)谴垫，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化富弦。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension而线，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能嗡官。
Vuex的核心
vuex由以下幾部分組成：
- state
- mutations
- getters
- actions
- modules
state里面就是存放項目中需要多組件共享的狀態(tài)
mutations就是存放更改state里狀態(tài)的方法
getters就是從state中派生出狀態(tài)箭窜，比如將state中的某個狀態(tài)進行過濾然后獲取新的狀態(tài)。
actions就是mutation的加強版衍腥，它可以通過commit mutations中的方法來改變狀態(tài)绽快，最重要的是它可以進行異步操作芥丧。
modules顧名思義，就是當用這個容器來裝這些狀態(tài)還是顯得混亂的時候坊罢，我們就可以把容器分成幾塊续担，把狀態(tài)和管理規(guī)則分類來裝。這和我們創(chuàng)建js模塊是一個目的活孩，讓代碼結(jié)構(gòu)更清晰物遇。
實例理解vuex
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store.js'
var vm = new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = { //數(shù)據(jù)存儲
count:10,
};
const mutations = { //數(shù)據(jù)處理
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
}
};
const actions = { //=處理你要怎么做，比如異步請求憾儒，判斷询兴，流程控制等commit講請求提交到mutation里面
increment:({commit})=>{
commit('increment');
},
decrement:({commit})=>{
commit('decrement');
},
increDouble:({commit,state})=>{
if(state.count%2==0){
commit('increment');
}
},
decreOnly:({commit,state})=>{
if (state.count%2!=0) {
commit('decrement');
}
},
clickAnsy:({commit})=>{//可以通過promise異步獲取數(shù)據(jù)
new Promise(function(resolve, reject) {
setTimeout(()=>{
commit('increment');
resolve();
},1000)
});
}
}
const getters={
nowNum(state){
return state.count;
},
getOdd(state) {
return state.count%2==0?'偶數(shù)':'奇數(shù)';
}
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
});
App.Vue
<template>
<div id="app">
<h2>vue全局組件use使用</h2>
<h2>vuex的使用</h2>
<input type="button" value="增加" @click="increment"/>
<input type="button" value="減少" @click="decrement"/>
<input type="button" value="偶數(shù)時可點擊+" @click="increDouble"/>
<input type="button" value="奇數(shù)時可點擊-" @click="decreOnly"/>
<input type="button" value="異步處理" @click="clickAnsy"/>
<div>現(xiàn)在的數(shù)字為：{{nowNum}} 它現(xiàn)在是{{getOdd}}</div>
<button @click="test"> 1 </button>
</div>
</template>
<script>
import {mapActions,mapGetters} from 'vuex'
export default {
name: 'app',
computed:{
...mapGetters([
'nowNum',
'getOdd'
])
},
methods:{
...mapActions([
'increment',
'decrement',
'increDouble',
'decreOnly',
'clickAnsy'
]),
test(){
this.$store.dispatch('increment')
}
},
mounted:function () {
console.log(this.$store)
}
}
</script>
現(xiàn)在vuex內(nèi)的定義已經(jīng)完成，可以再組件內(nèi)調(diào)用起趾，獲取了
獲取state內(nèi)值方法一：
computed: {
count () {
return this.$store.state.count
}
}
方法二 利用mapState 輔助函數(shù)
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭頭函數(shù)可使代碼更簡練
count: state => state.count,
// 傳字符串參數(shù) 'count' 等同于 `state => state.count`
countAlias: 'count',
// 為了能夠使用 `this` 獲取局部狀態(tài)诗舰，必須使用常規(guī)函數(shù)
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
對象展開運算符
mapState函數(shù)返回的是一個對象。我們?nèi)绾螌⑺c局部計算屬性混合使用呢训裆？通常眶根，我們需要使用一個工具函數(shù)將多個對象合并為一個，以使我們可以將最終對象傳給 computed
屬性边琉。但是自從有了對象展開運算符（現(xiàn)處于 ECMASCript 提案 stage-3 階段）属百，我們可以極大地簡化寫法：
computed: {
localComputed () { /* ... */ },
// 使用對象展開運算符將此對象混入到外部對象中
...mapState({
// ...
})
}
Mutations
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutations 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)变姨。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方族扰，并且它會接受 state 作為第一個參數(shù)：
你不能直接調(diào)用一個 mutation handler。這個選項更像是事件注冊：“當觸發(fā)一個類型為 increment 的 mutation 時定欧，調(diào)用此函數(shù)渔呵。”要喚醒一個 mutation handler砍鸠，你需要以相應(yīng)的 type 調(diào)用 store.commit 方法：
store.commit('increment')
提交載荷（Payload）
你可以向 store.commit 傳入額外的參數(shù)扩氢，即 mutation 的 載荷（payload）：
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)
在組件中提交 Mutations
你可以在組件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用（需要在根節(jié)點注入 store）睦番。
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations([
'increment' // 映射 this.increment() 為 this.$store.commit('increment')
]),
...mapMutations({
add: 'increment' // 映射 this.add() 為 this.$store.commit('increment')
})
}
}
Actions
Action 類似于 mutation类茂，不同在于：
- Action 提交的是 mutation耍属，而不是直接變更狀態(tài)托嚣。
- Action 可以包含任意異步操作。
組件內(nèi) 可以通過Action 通過 store.dispatch 方法觸發(fā)：觸發(fā)
Actions 支持同樣的載荷方式和對象方式進行分發(fā)：
// 以載荷形式分發(fā)
store.dispatch('incrementAsync', {
amount: 10
})
// 以對象形式分發(fā)
store.dispatch({
type: 'incrementAsync',
amount: 10
})
vuex內(nèi)的actions 會通過第二參數(shù)獲取
const actions = {
increment:({commit} , test)=>{
commit('increment' ,test);
},
}
modules
通過modules 創(chuàng)建的vuex state 是分模塊的厚骗，其他 mutations 和 actions 都不分模塊 如果重復(fù)命名會調(diào)用兩次 getters函數(shù)命名重復(fù)會報錯
使用的時候 獲取state值 使用 this.$store.(模塊名)+字段名
調(diào)用actions mutations 同單store
注意分modules 的vuex 的模塊只
export default {
state,
getters,
actions,
mutations
}
不實例化vuex
