我已经用谷歌搜索了这个错误,但是我得到的答案对我没有帮助。我正在尝试使用 Vuex 进行喜欢/不喜欢计数。我正在使用 jsonplaceholder 来获取数据。在这里,我获取数据并为所有对象设置类似的属性。
actions: {
async fetchPhotos({commit}) {
const response = await axios.get('https://jsonplaceholder.typicode.com/photos');
commit('setPhotos', response.data.splice(0,100))
},
}
mutations: {
setPhotos: (state, photos) => {
(state.albumList = photos);
state.albumList.forEach(element => element.likes = 0)}
}
Run Code Online (Sandbox Code Playgroud)
在我的 dom 之后,我想使用一个按钮表示不喜欢,使用另一个按钮表示喜欢。我想在单击按钮时显示类似计数器。
<div v-for="photos in allPhotos" :key="photos.id">
<div class="card" @click="detail(photos)"><img :src="photos.thumbnailUrl" alt=""></div>
<div class="likes">
<div class="myButton" ><button class="red" @click="minus(photos.id)"><i class="fas fa-minus"></i></button></div>
<div>{{photos.likes}}</div>
<div class="myButton "><button class="green" @click="plus(photos.id)"><i class="fas fa-plus"></i></button></div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
所以我在我的商店和脚本中添加了减突变。
methods: {
...mapMutations(['minus']),
Run Code Online (Sandbox Code Playgroud)
state: {
albumList : [],
},
mutations: {
minus: …Run Code Online (Sandbox Code Playgroud)