vue?當中組件之間共享數(shù)據(jù)的實現(xiàn)方式
vue組件之間共享數(shù)據(jù)方式
- 父向子傳值：v-bind 屬性綁定
- 子向父傳值：v-on 事件綁定
- 兄弟組件之間共享數(shù)據(jù)：EventHBus
$emit 發(fā)送數(shù)據(jù)的那個組件
$on 接收數(shù)據(jù)的那個組件
上面介紹的這三種組件之間的通訊方式，只適合在小范圍內(nèi)來進行數(shù)據(jù)的共享，如果我們要頻繁的、大范圍的實現(xiàn)數(shù)據(jù)的共享，以上三種方式就有點力不從心了
Vuex
vuex是實現(xiàn)組件全局狀態(tài)(數(shù)據(jù))管理的一種機制，可以方便的實現(xiàn)組件之間的數(shù)據(jù)共享
使用vuex統(tǒng)一管理狀態(tài)的好處
- 能夠在 vuex 中集中管理共享的數(shù)據(jù)，易于開發(fā)和維護
- 能夠高效的實現(xiàn)組件之間的數(shù)據(jù)共享，提高開發(fā)效率
- 存儲在 vuex 中的數(shù)據(jù)都是響應(yīng)式的，能夠?qū)崟r保持數(shù)據(jù)與頁面的同步
一般情況下，只有組件之間共享的數(shù)據(jù)，才有必要存儲到 vuex 中，對于組件中的私有數(shù)據(jù)，依舊存儲在組件自身的data中即可
vuex 的基本使用
1. 安裝 vuex 依賴包
npm install vuex --save
2. 導(dǎo)入 vuex 包
import Vuex from 'vuex' Vue.use(vuex)
3. 創(chuàng)建store對象
const store = new Vuex.Store({
? ? // state 中存放的就是全局共享的數(shù)據(jù)
? ? state: { count: 0 }
})4. 將 store 對象掛載到 vue 實例中
new Vue({
? ? el: '#app',
? ? render: h => h(app),
? ? router,
? ? // 將創(chuàng)建的共享數(shù)據(jù)對象，掛載到 vue 實例中
? ? // 所有的組件，就可以直接從 store 中獲取全局的數(shù)據(jù)了
? ? store
})vuex 中的主要核心概念
state
State提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)都要統(tǒng)一放到 Store 的 State 中進行存儲
// 創(chuàng)建store數(shù)據(jù)源，提供唯一的公共數(shù)據(jù)
const store = new Vuex.Store({
? ? state: { count:0 }
})組件訪問state中數(shù)據(jù)的第一種方式：
this.$store.state.全局數(shù)據(jù)名稱
組件訪問state中數(shù)據(jù)的第二種方式：
// 1. 從 vuex 中按需導(dǎo)入 mapState 函數(shù)
import { mapState } from 'vuex'通過剛才導(dǎo)入到 mapState 函數(shù)，將當前組件需要的全局數(shù)據(jù)，映射為當前組件的 computed 計算屬性：
// 2. 將全局數(shù)據(jù)，映射為當前組件的計算屬性
computed: {
? ? ...mapState(['count'])
}Mutation
Mutation 用于變更 Store 中的數(shù)據(jù)
只能通過 Mutation 變更 Store 中的數(shù)據(jù)，不可以直接操作 Store 中的數(shù)據(jù)
通過這種方式雖然操作起來稍微繁瑣一些，但是可以集中監(jiān)控所有數(shù)據(jù)的變化
// 定義 Mutation
const store = new Vuex.Store({
? ? state:{
? ? ? ? count: 0
? ? }
}),
mutations:{
? ? add(state){
? ? ? ? //變更狀態(tài)
? ? ? ? state.count++
? ? }
}
?
// 觸發(fā)mutation
methods：{
? ? handle(){
? ? ? ? //觸發(fā) mutation 的第一種方式
? ? ? ? this.$store.commit('add')
? ? }
}在觸發(fā) Mutation 時傳遞參數(shù)：
// 定義 Mutation
const store = new Vuex.Store({
? ? state:{
? ? ? ? count: 0
? ? },
? ? mutations:{
? ? ? ? addN(state,step){
? ? ? ? ? ? // 變更狀態(tài)
? ? ? ? ? ? state.count += step
? ? ? ? }
? ? }
})
?
?
// 觸發(fā)mutation
methods:{
? ? handle2(){
? ? ? ? // 在調(diào)用 commit 函數(shù)，觸發(fā) mutations 是攜帶參數(shù)
? ? ? ? this.$store.commit('addN',6)
? ? }
}this.$store.commit() 是觸發(fā) mutations 的第一種方式，觸發(fā) mutations 的第二種方式：
//1. 從 vuex 中按需導(dǎo)入 mapMutations 函數(shù)
import { mapMutations } from 'vuex'通過剛才導(dǎo)入的 mapMutations 函數(shù)，將需要的 mutations 函數(shù)，映射為當前組件的 methods 方法：
methods:{
? ? ...mapMutations(['add','addN']),
? ? // 下面是在組件中的使用方法，此時映射的 add 和 addN 函數(shù)就相當于當前組件的方法，通過this調(diào)用即可
? ? btnHandle1(){
? ? ? ? this.add()
? ? }
? ? btnHandle2(){
? ? ? ? this.addN()
? ? }
}Action
Action用來處理異步任務(wù)。
如果通過異步操作變更數(shù)據(jù)，必須通過 Action，而不能使用 Mutation ，但是 Action 中還是要通過觸發(fā) Mutation 的方式間接變更數(shù)據(jù)
觸發(fā) actions 的第一種方式是 通過 this.$store.dispatch('函數(shù)名稱')
觸發(fā) actions 的第二種方式是 通過 按需導(dǎo)入 mapActions函數(shù)，通過導(dǎo)入的 mapActions 函數(shù)，將需要的 actions 函數(shù)，映射為當前組件的 methods 方法即可
// 定義 Action
const store = new Vuex.Store({
? ? state:{
? ? ? ? count: 0
? ? },
? ? mutations:{
? ? ? ? add(state){
? ? ? ? ? ? state.count++
? ? ? ? },
? ? ? ? //攜帶參數(shù)的形式
? ? ? ? addN(state,step){
? ? ? ? ? ? state.count += step
? ? ? ? }
? ? },
? ? actions:{
? ? ? ? addAsync(context){
? ? ? ? ? ? setTimeout(()=>{
? ? ? ? ? ? ? ? context.commit('add')
? ? ? ? ? ? },1000)?
? ? ? ? },
? ? ? ? // actions 攜帶參數(shù)的形式
? ? ? ? addAsyncN(context,step){
? ? ? ? ? ? setTimeout(()=>{
? ? ? ? ? ? ? ? context.commit('addN',step)
? ? ? ? ? ? },1000)
? ? ? ? }
? ? }
})
?
?
// 觸發(fā) Action
methods：{
? ? handle(){
? ? ? ? // 觸發(fā) actions 的第一種方式
? ? ? ? this.$store.dispatch('addAsync')
? ? },
? ? handle2(){
? ? ? ? // 觸發(fā) actions 時攜帶參數(shù)
? ? ? ? this.$store.dispatch('addAsyncN',6 )
? ? }
}Getter
- Getter 用于對 Store 中的數(shù)據(jù)進行加工處理形成新的數(shù)據(jù)
- Getter 可以對 Store 中已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù)，類似 Vue 的計算屬性
Store中的數(shù)據(jù)發(fā)生變化時，Getter的數(shù)據(jù)也會跟著發(fā)生變化
// 定義 getter
const store = new Vuex.Store({
? ? state:{
? ? ? ? count: 0
? ? },
? ? mutations:{},
? ? Actions:{},
? ? getters:{
? ? ? ? showNum: state => {
? ? ? ? ? ? return '當前最新的數(shù)量是【'+ state.count +'】'
? ? ? ? }
? ? }
})使用 getters 的第一種方式：
this.$store.getters.名稱
使用 getters 的第二種方式：
import { mapGetters } from 'vuex'
computed:{
? ? ...mapGetters(['showNum'])
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
- Vue3學(xué)習筆記之依賴注入Provide/Inject
- vue中的依賴注入provide和inject簡單介紹
- Vue?privide?和inject?依賴注入的使用詳解
- Vue?2源碼閱讀?Provide?Inject?依賴注入詳解
- Vue 2.0 中依賴注入 provide/inject組合實戰(zhàn)
- vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作
- vue+vuex+axio從后臺獲取數(shù)據(jù)存入vuex實現(xiàn)組件之間共享數(shù)據(jù)
- Vue 使用依賴注入的方式共享數(shù)據(jù)的過程
相關(guān)文章
VsCode工具開發(fā)vue項目必裝插件清單(推薦!)
對于很多使用vscode編寫vue項目的新手同學(xué)來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于VsCode工具開發(fā)vue項目必裝插件的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-09-09
vue-router 控制路由權(quán)限的實現(xiàn)
這篇文章主要介紹了vue-router 控制路由權(quán)限的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-09-09
Vue中的數(shù)據(jù)更新是異步的，意味著我們在修改完Data之后并不能立刻獲取修改后的DOM元素。本文介紹了vue異步更新dom的實現(xiàn)，感興趣的小伙伴們可以參考一下2021-07-07
Vue富文本的實現(xiàn)可以使用一些現(xiàn)成的第三方庫,如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下2024-01-01
NProgress.js是輕量級的進度條組件，使用簡便，可以很方便集成到單頁面應(yīng)用中。這篇文章主要介紹了在vue項目中使用Nprogress.js進度條的方法,需要的朋友可以參考下2018-01-01
vue項目中使用crypto-js實現(xiàn)加密解密方式
這篇文章主要介紹了vue項目中使用crypto-js實現(xiàn)加密解密方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue關(guān)于數(shù)據(jù)綁定出錯解決辦法
這篇文章主要介紹了Vue關(guān)于數(shù)據(jù)綁定出錯解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了詳解Vue串聯(lián)過濾器的使用場景，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-04-04
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue3?入口文件createApp函數(shù),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04