vuex实现父页面和子页面传递数据ts

Vuex是一个专为Vue.js应用程序设计的状态管理模式，它允许你在整个应用中共享状态并协调组件间的动作。当你需要在父页面和子页面之间传递数据时，Vuex可以作为一个中心化的存储解决方案。

以下是通过Vuex实现父子页面间数据传递的基本步骤：

1. 定义状态（state）：在Vuex store中的`state`部分声明你需要共享的数据。例如：

import { defineStore } from 'vuex';

const store = defineStore('parentData', {
  state: () => ({
    sharedData: ''
  }),
});

2. 提供getter获取数据：为了方便在组件中访问数据，创建`getters`。

 getters: {
  getData: (state) => state.sharedData,
}

3. 父组件调用数据：通过`mapGetters`映射getter到组件的计算属性，然后在父组件中使用。

<template>
  <child-component :data="getData" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import { mapGetters } from 'vuex';

export default {
  components: { ChildComponent },
  computed: {
    ...mapGetters(['getData']),
  },
};
</script>

4. 子组件触发更新：如果子组件需要改变数据并通知父组件，可以在actions中修改状态，并通过`dispatch`触发这个动作。

// 子组件
methods: {
  sendData(newData) {
    this.$store.dispatch('updateSharedData', newData);
  },
}

// actions.ts
export const updateSharedData = (context, newData) => {
  context.commit('updateSharedData', newData);
};

5. commit mutations：在`mutations`中处理状态的变化。

mutations: {
  updateSharedData(state, newData) {
    state.sharedData = newData;
  },
}