我想使用 vuex 存盤從服務器獲取的一些資料，我的 SPA Vue 應用程式需要在不同的頁面中，這是為了避免每次用戶更改產品頁面時都會發出新的 ajax 請求（這是一個無頭電子商務）。
我的問題很簡單，如何將獲取的資料推送到我的商店中定義的陣列中？我將如何獲取組件中的資料？我正在撰寫代碼，但不確定我是否做得很好。
import { createStore } from 'vuex'
import axios from 'axios'
export default createStore({
state: {
products: []
},
mutations: {
updateProductsData(state, products){
// not sure how to proceed here
}
},
actions: {
fetchProducts(){
const baseURL = 'https://www.example.com/app/index.php/wp-json/shop/v1/products';
let productsData = [];
axios.get(baseURL).then( response => {
response.data.forEach( el => {
console.log(el);
let details = {
id: el.id,
slug: el.slug,
name: el.name,
price: el.price,
description: el.description,
short_description: el.short_description
}
productsData.push(details);
});
store.commit('updateProductsData', productsData);
}).catch( e => console.log(e) );
}
}
})
在我需要加載資料的組件中，我有這段代碼
export default {
name: 'Home',
data(){
return {
loaded: false,
offers: [],
}
},
created(){
},
mounted(){
this.$store.dispatch('fetchProducts').then( res => this.offers.push(res) )
},
}
uj5u.com熱心網友回復：
在您的updateProductsData突變中使用state.products = [...products]將您加載的產品添加到您的狀態
查看https://www.vuemastery.com/courses/vuex-fundamentals/vuex4-intro-to-vuex了解 Vuex 的簡短介紹
uj5u.com熱心網友回復：
更新您的商店操作以回傳產品資料陣列。
fetchProducts() {
const baseURL = "https://www.example.com/app/index.php/wp-json/shop/v1/products";
const productsData = [];
axios
.get(baseURL)
.then(response => {
response.data.forEach(el => {
console.log(el);
const details = {
id: el.id,
slug: el.slug,
name: el.name,
price: el.price,
description: el.description,
short_description: el.short_description
};
productsData.push(details);
});
})
.catch(e => {
console.log(e);
});
return productsData;
}
現在，當您從組件調度操作時，我們會發回結果。
更好的方法
一個更好的方法是簡單地回傳 Axios 呼叫本身，它是一個 Promise，你可以await在你的組件中使用它。
或者，您可以將 Axios 呼叫包裝在您自己的 Promise 中，并僅使用組件中的資料、處理錯誤和物件來解決它，以便更好地反饋給用戶，如下所示：
fetchProducts() {
const baseURL = "https://www.example.com/app/index.php/wp-json/shop/v1/products";
return new Promise((resolve, reject) => {
axios
.get(baseURL)
.then(response => {
resolve(response.data);
})
.catch(e => {
reject(e);
});
});
}
合適的方式
要正確使用商店，您應該實作 VueX 操作，例如：
fetchProducts({ commit }) {
const baseURL = "https://www.example.com/app/index.php/wp-json/shop/v1/products";
return new Promise((resolve, reject) => {
axios
.get(baseURL)
.then(response => {
commit("setProductData", res.data);
})
.catch(e => {
reject(e);
});
});
}
添加以下突變：
setProductData(state, productData) {
state.products = productData.map(product => {
return {
id: product.id,
slug: product.slug,
name: product.name,
price: product.price,
description: product.description,
short_description: product.short_description
};
});
}
將您的組件更新為：
export default {
name: "Home",
data() {
return {
loaded: false,
offers: []
};
},
computed: {
products() {
return this.$store.state.products;
}
},
mounted() {
this.$store.dispatch("fetchProducts");
}
};
uj5u.com熱心網友回復：
關于actions和mutations的使用可以參考Vuex的檔案https://vuex.vuejs.org/guide/actions.html。很詳細...
正如 Vuex 建議的那樣，您應該將異步操作放入操作中（例如在您的示例中從服務器獲取資料）。然后你應該提交一個“突變”來使用獲取的資料來設定你的狀態，就像下面給出的代碼一樣
import { createStore } from 'vuex'
import axios from 'axios'
export default createStore({
state: {
products: []
},
mutations: {
updateProductsData(state, products){
// here set your state
state.products = products
}
},
actions: {
fetchProducts(){
const baseURL = 'https://www.example.com/app/index.php/wp-json/shop/v1/products';
let productsData = [];
axios.get(baseURL).then( response => {
response.data.forEach( el => {
console.log(el);
let details = {
id: el.id,
slug: el.slug,
name: el.name,
price: el.price,
description: el.description,
short_description: el.short_description
}
productsData.push(details);
});
store.commit('updateProductsData', productsData);
}).catch( e => console.log(e) );
}
}
})
如果要在組件中使用狀態，可以將其放在計算屬性中。
export default {
name: 'Home',
data(){
return {
loaded: false,
}
},
computed:{
// map this.offers to store.state.products
offers(){
return this.$store.state.products
}
},
created(){
},
mounted(){
// dispatch 'fetchProducts' to fetch data
this.$store.dispatch('fetchProducts')
},
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/434613.html
標籤：javascript Vue.js Vuex