vuex組件之間共享數(shù)據(jù)的方式
父向子傳值：v-bind 屬性綁定
子向父傳值：v-on事件綁定
兄弟組件之間共享數(shù)據(jù)： EventBus
? ? $on 接收數(shù)據(jù)的那個組件
? ? $emit 發(fā)送數(shù)據(jù)的那個組件
以上方式，只使用于小范圍內(nèi)傳遞數(shù)據(jù)
vuex是實現(xiàn)組件全局狀態(tài)（數(shù)據(jù)）管理的一種機制，可以方便的實現(xiàn)數(shù)組之間的數(shù)據(jù)的共享
vuex總結(jié)
修改state狀態(tài)必須通過mutations
mutations只能執(zhí)行同步代碼，類似ajax，定時器之類的代碼不能在mutations中執(zhí)行
執(zhí)行異步代碼，要通過actions，然后將數(shù)據(jù)提交給mutations才可以完成
state的狀態(tài)即共享數(shù)據(jù)可以在組件中引用
組件中可以調(diào)用action
1、vuex基礎(chǔ)-state
state是放置所有公共狀態(tài)的屬性，如果你有一個公共狀態(tài)數(shù)據(jù) ， 你只需要定義在 state對象中
//初始化Vuex對象
const store = new Vuex.store({
//設(shè)置公共數(shù)據(jù)狀態(tài)? store映射到全局
state:{
//管理數(shù)據(jù)?
count:0
}
})
在數(shù)據(jù)中的取值方式
//在組件中取值 一共為三種
// 第一種原始形式-插值表達式? 通過$store將里面的state里面
//的count取出來
<div>state的數(shù)據(jù):{{$store.state.count}}</div>
//第二種 計算屬性
//把state中數(shù)據(jù)，定義在組件內(nèi)的計算屬性中
computed:{
count(){
return this.$store.state.count;
}
}
<div>state計算屬性取值方式:{{count}}</div>
//第三種 輔助函數(shù) mapState
//mapState 能幫我們把store 中的數(shù)據(jù)映射到 組件的計算屬性中
// 操作需要三步：
improt { mapState } from 'vuex' //第一步： 導(dǎo)入mapState
computed:{
//第二步利用延展運算符將到導(dǎo)出的狀態(tài)映射到計算屬性
...mapState(['count'])
}
<div>state輔助函數(shù)取值方式:{{count}}</div> //第三步：取值
2、vuex基礎(chǔ)-mutations
state數(shù)據(jù)的修改只能通過mutations，并且mutations必須是同步更新，目的是形成數(shù)據(jù)快照
數(shù)據(jù)快照：一次mutation的執(zhí)行，立刻得到一種視圖狀態(tài)，因為是立刻，所以必須是同步
mutations: {
? ? // 方法里參數(shù) 第一個參數(shù)是當前store的state屬性
? ? // payload 載荷 運輸參數(shù) 調(diào)用mutaiions的時候 可以傳遞參數(shù) 傳遞載荷
? ? addCount (state) {
? ? ? state.count += 1
? ? }
? },
原始形式-$store 通過commit（‘函數(shù)名’，參數(shù)） 去調(diào)用mutations里面的函數(shù)
<template>
? <button @click="addCount">+1</button>
</template>
<script>
export default {
? ? methods: {
? ? //? 調(diào)用方法
? ? ? addCount () {
? ? ? ? // 調(diào)用store中的mutations 提交給muations
? ? ? ? // commit('muations名稱', 2)
? ? ? ? this.$store.commit('addCount', 10)? // 直接調(diào)用mutations
? ? }
? }
}
</script>
3、vuex基礎(chǔ)-actions?
是操作異步請求的 執(zhí)行完畢異步請求通過 context.commit 去提交到mutations在通過 mutaitions修改state里面的數(shù)據(jù)
state是存放數(shù)據(jù)的，mutations是同步更新數(shù)據(jù)，actions則負責進行異步操作
actions: {
? //? 獲取異步的數(shù)據(jù) context表示當前的store的實例 可以通過 context.state 獲取狀態(tài) 也可以通過context.commit 來提交mutations， 也可以 context.diapatch調(diào)用其他的action
? ? getAsyncCount (context) {
? ? ? setTimeout(function(){
? ? ? ? // 一秒鐘之后 要給一個數(shù) 去修改state
? ? ? ? context.commit('addCount', 123)
? ? ? }, 1000)
? ? }
}
原始調(diào)用 - $store?
addAsyncCount () {
? ? this.$store.dispatch('getAsyncCount', 123)
}
4、vuex基礎(chǔ)-getters?
類似于計算屬性或者說是加工更或者說選出指定條件的值
除了state之外，有時我們還需要從state中派生出一些狀態(tài)，這些狀態(tài)是依賴state的，此時會用到getters
state: {
? ? list: [1,2,3,4,5,6,7,8,9,10]
}
getters: {
? ? // getters函數(shù)的第一個參數(shù)是 state
? ? // 必須要有返回值
? ? filterList:? state =>? state.list.filter(item => item > 5)
? }
