vuex与业务组件及UI组件的相互作用

2023-12-15 22:45:04

业务组件与UI组件交互的模式

vue-element-admin的业务组件与UI组件的交互的模式与vuex与业务组件的交互模式是一致的，也就是说业务组件与UI组件交互也是通过$emit、@事件、props等方式。业务组件和UI组件通过emit、on、props实现通信。

vuex与业务组件交互，vuex作为全局状态管理工具，业务组件通过$emit、@事件、props等方式与vuex进行交互。
业务组件与UI组件交互，业务组件通过$emit、@事件、props等方式与UI组件进行交互。

下面将继续了解vuex与UI组件的交互，并且对前面的内容进行补充。

vuex与UI组件的交互

vuex与UI组件的交互与vuex与业务组件的交互也是一致的，也就是说vuex通过Provide和Inject的方式，向UI组件提供数据和方法。vuex通过provide和inject实现与UI组件的通信。

Provide和Inject都是Composition API提供的特性，通过Provide和Inject可以让组件将值传递给其子孙组件。

Provide and Inject大致用法如下：

// 在组件内使用 provide 声明需要提供的属性
export default {
  name: "Parent",
  setup () {
    const foo = ref("foo")

    provide("foo", foo)
  },
  template: '<Child/>'
}

// 在子组件中使用 inject 注入属性
export default {
  name: "Child",
  setup () {
    const foo = inject("foo")

    return {
      foo
    }
  },
  template: '<div>{{ foo }}</div>'
}

在vuex中，我们将vuex的state挂载到根组件中，然后使用provide将state提供给子孙组件。

import { reactive } from 'vue'
import { createStore } from 'vuex'

// 全局状态
const store = createStore({
  state: reactive({
    count: 0
  })
})

// 根组件
export default {
  name: "App",
  setup () {
    // 挂载store
    provide('store', store)
  },
  template: `<div><Child/></div>`
}

// 子组件
export default {
  name: "Child",
  setup () {
    const store = inject('store')
    
    return {
      count: store.state.count
    }
  },
  template: `<div>{{ count }}</div>`
}

这样子子孙组件就可以访问vuex的state了。

组件数据更新

由于vuex与UI组件的交互是异步的，所以在vuex的state更新后，UI组件并不会立即更新。我们可以使用watch方法来监听vuex的state的变化，当vuex的state变化后，UI组件就会立即更新。

export default {
  name: "Child",
  setup () {
    const store = inject('store')

    watch(store.state.count, (newValue, oldValue) => {
      console.log('count changed from', oldValue, 'to', newValue)
    })

    return {
      count: store.state.count
    }
  },
  template: `<div>{{ count }}</div>`
}

获取vuex的getter

vuex的getter是用来获取vuex的state的计算属性，我们可以使用inject方法来获取vuex的getter。

export default {
  name: "Child",
  setup () {
    const store = inject('store')

    const doubleCount = computed(() => {
      return store.getters.doubleCount
    })

    return {
      doubleCount
    }
  },
  template: `<div>{{ doubleCount }}</div>`
}

触发vuex的mutation

vuex的mutation是用来修改vuex的state的，我们可以使用inject方法来获取vuex的mutation，然后就可以使用vuex的mutation来修改vuex的state了。

export default {
  name: "Child",
  setup () {
    const store = inject('store')

    const increment = () => {
      store.commit('increment')
    }

    return {
      increment
    }
  },
  template: `<button @click="increment">+</button>`
}