VueX如何實(shí)現(xiàn)數(shù)據(jù)共享

更新時間：2024年08月31日 10:51:56 作者：SixCandy

這篇文章主要介紹了VueX如何實(shí)現(xiàn)數(shù)據(jù)共享問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1 VueX

1.1 VueX概述

回顧組件之間共享數(shù)據(jù)的方式：

VueX是實(shí)現(xiàn)組件數(shù)據(jù)（狀態(tài)）管理的一種機(jī)制，可以方便的實(shí)現(xiàn)組件之間數(shù)據(jù)共享。

使用VueX的好處：

集中管理共享數(shù)據(jù)，易于開發(fā)和后期維護(hù)
高效實(shí)現(xiàn)組件的數(shù)據(jù)共享，提高開發(fā)效率
存在VueX中的數(shù)據(jù)都是響應(yīng)式的，能夠?qū)崟r保持?jǐn)?shù)據(jù)與頁面的同步

1.2 VueX的基本使用

安裝vuex依賴包

npm i vuex --save

導(dǎo)入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

創(chuàng)建store對象

const store = new Vuex.Store({
  //state中存放的就是全局共享數(shù)據(jù)
  state:{count:0}
})

將store對象掛載到vue中

new Vue ({
  el:'#app',
  render: h=>h(app),
  router,
  //將創(chuàng)建的共享數(shù)據(jù)對象，掛載到vue實(shí)例中，所有組件就可以直接從store中獲取全局的數(shù)據(jù)了
  store
})

1.3 VueX的核心概念

1.3.1 State

State提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)都要統(tǒng)一放到Store的state中

組件訪問的state中數(shù)據(jù)的第一種方式：

this.$store.state.全局?jǐn)?shù)據(jù)名稱

組件訪問的state中數(shù)據(jù)的第二種方式：

//從vuex中導(dǎo)入mapState函數(shù)
import {mapState} from 'vuex'

注釋：通過導(dǎo)入的mapState函數(shù)，將當(dāng)前組件需要的全局?jǐn)?shù)據(jù)，映射為當(dāng)前組件的computed計算屬性：

//例如：
computed:{
   ...mapState(['count'])
}

1.3.2 Mutation

Mutation用于變更Store的數(shù)據(jù)

觸發(fā) mutation的第一種方式：this.$store.commit()函數(shù)

實(shí)例代碼：

 mutations: {
   add(state){
     //變更狀態(tài)
     state.count++
   }
 },

<template>
 <div>
     <h3>當(dāng)前最新的count值：{{this.$store.state.count}}</h3>
     <button @click="handle1">+1</button>
 </div>
</template>

<script>
export default {
   data(){
       return{};
   },
   methods:{
       //觸發(fā)mutation
      handle1(){
           this.$store.commit('add')
      }
   }
}
</script>

mutation時傳遞參數(shù)：

 mutations: {
   addN(state,step){
     //變更狀態(tài)
     state.count += step
   }
 },

handle2(){
 this.$store.commit('addN',2)
}

觸發(fā)mutation的第二種方式：

mutations: {
   sub(state){
      state.count--
   },
   subN(state,step){
     state.count -= step
  },
 },

<template>
 <div>
     <h3>當(dāng)前最新的count值：{{count}}</h3>
     <button @click="handlersub">-1</button>
     <button @click="handlesub2">-2</button>
 </div>
</template>
<script>
import { mapState ,mapMutations} from 'vuex';
export default {
   computed:{
       ...mapState(['count'])
   },
   methods:{
       ...mapMutations(['sub','subN']),
       handlersub(){
           this.sub()
       },
       handlesub2(){
           this.subN(2)
       }
   }
}
</script>

1.3.3 Action

Action用于處理異步任務(wù)

在actions中不能直接修改state中的數(shù)據(jù)，必須通過context.commit觸發(fā)某個mutations中的函數(shù)

觸發(fā)actions的第一種方式：

this.$store.dispatch()

actions中攜帶參數(shù)：

 //context是默認(rèn)參數(shù)
addNdely(context,step){
  setTimeout(()=>{
    context.commit('addN',step)
  },1000)
}

觸發(fā)actions的第二種方式：

import {mapActions} from 'vuex';
export default {
    methods:{
        //觸發(fā)actions
         ...mapActions(['addNdely']),    
    }
}

1.3.4 Getter

Getter用于對store中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)

使用getters的第一種方式：

this.$store.getters.函數(shù)名稱

使用getters的第二種方式：

import {mapGetters} from 'vuex';
export default {
   computed:{
     ...mapGetters(['showNum'])
   },
}

store.js：

import { setTimeout } from 'core-js'
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {
    //這是一個函數(shù)
    showNum:state =>{
       return '最新count:'+state.count
    }
  },
  mutations: {
    add(state){
      //變更狀態(tài)
      state.count++
    },
    addN(state,step){
      //變更狀態(tài)
      state.count += step
    },
    sub(state){
       state.count--
    },
    subN(state,step){
      state.count -= step
   },
  },
  actions: {
    //context是默認(rèn)參數(shù)
    addNdely(context,step){
         setTimeout(()=>{
            context.commit('addN',step)
         },1000)
    }
  },
  modules: {
  }
})

Addi.vue：

<template>
  <div>
      <h3>當(dāng)前最新的count值：{{this.$store.state.count}}</h3>
      <!-- <h4>getters:{{$store.getters.showNum}}</h4> -->
      <h4>getters:{{showNum}}</h4>
      <button @click="handle1">+1</button>
      <button @click="handle3">+2</button>
      <button @click="addNdely">+dely</button>
  </div>
</template>
<script>
import { mapMutations,mapActions,mapGetters} from 'vuex';
export default {
    computed:{
      ...mapGetters(['showNum'])
    },
    methods:{
        //觸發(fā)mutation
         ...mapMutations(['add','addN']),
         ...mapActions(['addNdely']),
       handle1(){
            this.add()
       },
       handle2(){
            this.$store.commit('addN',2)
       },
       handle3(){
           this.$store.dispatch('addNdely',2)
       }
      
    }
}
</script>

Sub.vue：

<template>
  <div>
      <h3>當(dāng)前最新的count值：{{count}}</h3>
      <button @click="handlersub">-1</button>
      <button @click="handlesub2">-2</button>
  </div>
</template>
<script>
import { mapState ,mapMutations} from 'vuex';
export default {
    computed:{
        ...mapState(['count'])
    },
    methods:{
        ...mapMutations(['sub','subN']),
        handlersub(){
            this.sub()
        },
        handlesub2(){
            this.subN(2)
        }
    }
}
</script>