---
# System prepended metadata

title: 使用 Actions 取得遠端資料
tags: [VUE]

---

###### tags: `VUE`

使用 Actions 取得遠端資料
===
從下面的範例來說
## 找需要的資料
你想用成 store 的 function 裡面有關資料的都要先取出
從下方的 code 找到裡面需要的資料有
 - getProducts  function
 - data -> products: []
 - getUnique function
 - data -> categories: []

![](https://i.imgur.com/yCh7KvS.png)

## 貼到 store

### (未修改)-那我們就把需要的資料移到 store 裡面
![](https://i.imgur.com/wMLVy67.png)

### (修改完畢)
![](https://i.imgur.com/HdYJ1RC.png)

## 修改元件 code
1. 刪除 store 有的 data 資料 
2. computed 掛載 store 上的資料
3. methods function 用 dispatch 來拿 store 的資料 ， 
   **EX：this.$store.dispatch('store action name')**

![](https://i.imgur.com/nCRSMeh.png)


## 如果有使用 axios 要注意
### 遇到問題
如果遇到此錯誤訊息是因為沒有將 axios 加入 store，用以下方式解決
![](https://i.imgur.com/8VieQsG.png)
### 解決方式
在 store 裡面加入
```=
import axios from 'axios';
```
**並將所有的 this.$http 改成 axios**
![](https://i.imgur.com/okP2zR5.png)
