在store中index.js的state存放了goods数据,创建了一个goods获取数据,已经实现了商品界面,现在如何在输入框输入商品名称跳转到商品界面,用vuex实现
时间: 2024-03-11 16:49:28 浏览: 77
好的,以下是使用Vuex实现输入框输入商品名称跳转到商品界面的示例代码:
假设我们在Vuex的store中定义了一个名为goods的模块,用于存放商品数据,其中包含了一个名为list的状态,用于存放商品列表数据。
在Vue组件中的模板中,需要添加一个输入框和一个按钮,用于输入商品名称和触发跳转逻辑。具体代码如下:
```
<template>
<div>
<input type="text" v-model="searchText">
<button @click="handleSearch">Search</button>
</div>
</template>
```
在Vue组件中,我们需要使用Vuex的mapActions和mapState方法,将store中的list状态和searchGoods动作映射到组件中的计算属性和方法中。具体代码如下:
```
<template>
<div>
<input type="text" v-model="searchText">
<button @click="handleSearch">Search</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState('goods', ['list'])
},
data() {
return {
searchText: ''
};
},
methods: {
...mapActions('goods', ['searchGoods']),
handleSearch() {
this.searchGoods(this.searchText);
}
}
}
</script>
```
在上面的代码中,我们使用mapState将goods模块中的list状态映射到组件中的计算属性中,使用mapActions将goods模块中的searchGoods动作映射到组件中的方法中。在handleSearch方法中,我们调用了searchGoods动作,并将输入框中的商品名称作为参数传递给了动作。
接下来,我们需要在goods模块中实现searchGoods动作,用于根据商品名称从服务器获取商品数据,并更新list状态。具体代码如下:
```
import axios from 'axios';
const state = {
list: []
};
const mutations = {
setList(state, list) {
state.list = list;
}
};
const actions = {
async searchGoods({ commit }, name) {
const response = await axios.get(`/api/goods?name=${name}`);
const list = response.data;
commit('setList', list);
}
};
export default {
namespaced: true,
state,
mutations,
actions
};
```
在上面的代码中,我们首先定义了goods模块的状态和变更方法,然后定义了searchGoods动作,并使用axios库从服务器获取商品列表数据,并通过commit方法更新list状态。
最后,我们需要在商品界面中展示获取到的商品数据。具体代码如下:
```
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">
{{ item.name }} - {{ item.price }}
</li>
</ul>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState('goods', ['list'])
}
}
</script>
```
在上面的代码中,我们使用mapState将goods模块中的list状态映射到组件中的计算属性中,并在模板中使用v-for指令遍历list数组,展示商品名称和价格信息。
综上所述,以上就是使用Vuex实现输入框输入商品名称跳转到商品界面的完整代码。
阅读全文