一桦山、vuex是什么垫桂？
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的**狀態(tài)管理模式蜡励。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)隆圆，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
二镀岛、什么情況下我應(yīng)該使用 Vuex弦牡？
- 不適用：小型簡單應(yīng)用友驮，用 Vuex 是繁瑣冗余的，更適合使用簡單的 store 模式
- 適用于：中大型單頁應(yīng)用驾锰，你可能會(huì)考慮如何把組件的共享狀態(tài)抽取出來卸留，以一個(gè)全局單例模式管理，不管在哪個(gè)組件椭豫，都能獲取狀態(tài)/觸發(fā)行為艾猜，解決問題如下：
① 多個(gè)視圖使用于同一狀態(tài)：
傳參的方法對(duì)于多層嵌套的組件將會(huì)非常繁瑣，并且對(duì)于兄弟組件間的狀態(tài)傳遞無能為力
② 不同視圖需要變更同一狀態(tài)：
采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝捻悯，通常會(huì)導(dǎo)致無法維護(hù)的代碼
三、Vuex 和單純的全局對(duì)象有何不同淤毛？
1.Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的
當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候今缚，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新低淡。
2.你不能直接改變 store 中的狀態(tài)
改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation姓言，方便我們跟蹤每一個(gè)狀態(tài)的變化。
四蔗蹋、Vuex核心概念
1何荚、store：類似容器，包含應(yīng)用的大部分狀態(tài)
一個(gè)頁面只能有一個(gè)容器
狀態(tài)存儲(chǔ)是響應(yīng)式的
不能直接改變store中的狀態(tài)猪杭，唯一途徑顯示地提交mutations
在actions里面餐塘，也不能直接更改state里面的狀態(tài)值，必須先定義一個(gè)mutations皂吮，然后在actions里面commit這個(gè)mutations戒傻，從而來更改state的狀態(tài)值；如果要再次請(qǐng)求異步蜂筹，那么就是dispatch一個(gè)actions
2需纳、State：包含所有應(yīng)用級(jí)別狀態(tài)的對(duì)象
3、Getters：在組件內(nèi)部獲取store中狀態(tài)的函數(shù)艺挪，類似組件的計(jì)算屬性computed
4不翩、Mutations：唯一修改狀態(tài)的事件回調(diào)函數(shù)，默認(rèn)是同步的麻裳，如果要異步就使用Actions
5口蝠、Actions：包含異步操作、提交mutations改變狀態(tài)
6津坑、Modules：將store分割成不同的模塊
五亚皂、下載安裝vuex
//下載
npm install vuex --save
//使用
2、作為插件使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3国瓮、定義容器
new Vuex.Store({
state:{
num:0
},
mutations:{ //對(duì)象灭必，里面是各種更改state狀態(tài)值的函數(shù)狞谱，同步立即更改狀態(tài)
add( state,payload ){ //參數(shù)state就是上面的state，payload是要傳遞的值
state.num+=payload.n;
}
reduce(state){
state.num--
}
},
actions:{
//異步更改狀態(tài)禁漓，可以是ajax請(qǐng)求成功之后改變狀態(tài)跟衅，這里用定時(shí)器模擬，1秒鐘之后提交mutations改變狀態(tài)
//異步的更改狀態(tài)是直接在index.js里面的actions里面定義action然后commit的(附帶參數(shù))播歼，而不是在組件內(nèi)提交伶跷，注意區(qū)別，異步是在組件內(nèi)dispatch這個(gè)actions(actions里面已經(jīng)包含了mutations)秘狞，同步是在組件內(nèi)commit這個(gè)mutations(附帶參數(shù))
//異步也可以在index.js里面直接dispatch這個(gè)actions(附帶參數(shù))
addAction( context ){
context.commit("add")
}
reduceAction( {commit}){
commit("reduce")
}
//利用es6解構(gòu)賦值改寫上面的代碼叭莫，因?yàn)閏ontext對(duì)象下面有commit和dispatch方法
addAction( {commit,dispatch} ){
setTimeout(function(){
commit('add',{n:200}); //直接可以獲取到commit方法，不用是context.commit
dispatch('textAction',{test:'測(cè)試'})
},1000)
}
reduceAction( context,obj ){ //ajax2
console.log(obj)
}
},
//異步更改狀態(tài),一段時(shí)間之后再改變狀態(tài)烁试，只要是異步的改變都寫在actions里面
getters:{ //類似計(jì)算屬性雇初，對(duì)狀態(tài)做進(jìn)一步的處理
filternum(state){
return state.num>=120?120:state.num++;
}
}
})
export default store
4、注入根實(shí)例
import store from './store'
new Vue({
store
})
5减响、在state里面定義的是狀態(tài)靖诗，如果在組件內(nèi)部要使用這個(gè)狀態(tài)，那么一般在組件內(nèi)部通過計(jì)算屬性來得到它
//vuex.vue
<template>
<button @click="add()">+</button>
<p>{{num}}</p>
//通過getter進(jìn)行計(jì)算后的值
<p>{{num1}}</p>
<button @click="reduce">-</button>
</template>
<script>
export default{
computed:{
num(){
return this.$store.state.num
},
num1(){
return this.$store.getters.filternum //被getters進(jìn)一步處理過的狀態(tài)
}
},
methods:{
add(){
//要?jiǎng)討B(tài)的改變狀態(tài)支示，就需要顯示的提交一個(gè)mutations —> add
//同步刊橘，寫法一
this.$store.commit('add',{n:10})
//同步，寫法二
this.$store.commit({
type:'add',
n:5
})
//異步颂鸿，寫法
this.$store.dispatch('addAction')
}促绵，
reduce(){
//要?jiǎng)討B(tài)的改變狀態(tài)，就需要顯示的提交一個(gè)mutations —> add
//同步嘴纺，寫法一
this.$store.commit('reduce',{n:10})
}
}
</script>
六绞愚、輔助函數(shù)
//vuextwo.vue
<template>
<div>
<button @click="addAction">+</button>
{{num}}
<button @click="reduceAction">-</button>
</div>
</template>
<script>
// mapstate 輔助函數(shù)
import {mapState,mapMutations,mapGetters,mapActions} from "vuex"
export default {
data(){
return{
}
},
// 計(jì)算屬性 setter getter
//第一種寫法
// computed: {
// num(){
// return this.$store.state.num
// }
// },
// 第二種寫法
// computed: {
// ...mapState(["num"])
// },
//第三種寫法
// computed:mapState(["num","list"]),
//采用getters進(jìn)行計(jì)算
computed: {
...mapGetters(["num"])
},
// methods:{
// ...mapMutations(["add","reduce"])
// },
// methods:mapMutations(["add","reduce"])
methods:mapActions(["addAction","reduceAction"])
}
</script>
<style scoped>
</style>
如果感覺有幫助，給予一個(gè)寶貴的贊Ｓ币健Ｎ获谩！熔萧！
