vue3调用公共方法获取数据

《vue3调用公共方法获取数据》

开头解决方案

在Vue3项目中，为了提高代码的复用性和可维护性，将获取数据的方法定义为公共方法是常见的做法。这可以通过创建一个单独的工具函数文件、使用Vuex管理状态或者利用组合式API中的setup函数结合provide/inject等方式来实现。

思路一：创建工具函数文件

在src目录下创建一个名为utils的文件夹，在其中创建一个getData.js文件。
javascript // getData.js export function fetchData(url) { return new Promise((resolve, reject) => { fetch(url) .then(response => response.json()) .then(data => resolve(data)) .catch(error => reject(error)); }); }
然后在组件中引入并使用：
```javascript

{{ item.name }}

import { ref, onMounted } from 'vue';
import { fetchData } from '../utils/getData';

export default {
name: 'MyComponent',
setup() {
const dataList = ref([]);

onMounted(() => {
loadData();
});

return {
dataList
};
}
};

</p>

<h2><h2>思路二：使用Vuex</h2></h2>

<p>在store文件夹下的index.js中定义actions和getters等。
```javascript
// store/index.js
import { createStore } from 'vuex';</p>

<p>export default createStore({
  state: {
    dataList: []
  },
  mutations: {
    setList(state, list) {
      state.dataList = list;
    }
  },
  actions: {
    async fetchList({ commit }) {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        commit('setList', data);
      } catch (error) {
        console.error('获取数据失败', error);
      }
    }
  },
  getters: {
    getDataList: state => state.dataList
  }
});
<code>
在组件中使用：
javascript

  
    
      {{ item.name }}
    
  



import { computed, onMounted } from 'vue';
import { useStore } from 'vuex';

export default {
  name: 'MyComponent',
  setup() {
    const store = useStore();
    const dataList = computed(() => store.getters.getDataList);

    onMounted(() => {
      store.dispatch('fetchList');
    });

    return {
      dataList
    };
  }
};

思路三：组合式API中的provide / inject

在父组件中：
```javascript

import { provide, onMounted } from 'vue';
import { fetchData } from './utils/getData';

export default {
name: 'ParentComponent',
setup() {
const dataList = ref([]);
const loadData = async () => {
try {
const url = 'https://api.example.com/data';
const data = await fetchData(url);
dataList.value = data;
} catch (error) {
console.error('获取数据失败', error);
}
};

provide('dataList', dataList);

onMounted(() => {
loadData();
});

return {};
}
};

在子组件中：javascript