英文:
How to pass an input event to the getter store Vuex?
问题
如何将输入字段传递给 getter？
我正在尝试将输入字段作为参数传递给 getter。如何将参数传递给 getter？
<input
type="text"
placeholder="Search here"
v-model="search"
:input=event.target.value"
/>
export const mutations = {
setProducts(state, data) {
state.products = data;
},
export const actions = {
async getProducts(context) {
const res = await fetch(...
context.commit('setProducts', result);
},
}
英文:
How to pass an input field to the getter?
I'm trying to pass th einput field to the getter as a paramether. How to pass the param to the getter ?
<input
type="text"
placeholder="Search here"
v-model="search"
:input=event.target.value"
/>
export const mutations = {
setProducts(state, data) {
state.products = data;
},
export const actions = {
async getProducts(context) {
const res = await fetch(...
context.commit('setProducts', result);
},
}
答案1
得分: 1
Getters 是 vuex store 的基本 computed 属性。它们将 state 作为第一个参数，并将其他 getters 作为第二个参数。如果你想要将某些东西作为参数发送到 store，然后对其执行操作，你需要在 store 中定义一个 action，然后在你的组件中调用该 action 并传递所需的数据给它。Getters 用于访问你的 vuex state 并将它们返回给你的组件。
示例 getter：
store.js
// 初始化 store
state: {
todos: []
},
actions: {
getTodos(/*来自组件的数据*/) {
// 将数据设置到 todos 状态并在组件中调用此 action
state.todos = //来自组件的数据
}
},
getters: {
todos(state) {
return state.todos;
}
}
编辑：
以下是你的 component 文件的示例。
component.vue
<input
type="text"
placeholder="在此搜索"
v-model="search"
/>
<script>
import { ref } from 'vue';
import { getProducts } from '../store';
const search = ref('');
const products = () => {
getProducts(search.value);
}
</script>
store.js
export const state = () => ({
products: [],
});
export const mutations = {
setProducts(state, data) {
state.products = data;
},
}
export const actions = {
async getProducts({ commit }, search) {
const result = await fetch()
// 在这里执行筛选逻辑
commit('setProducts', result);
},
}
export const getters = {
getProducts(state) {
return state.products;
},
};
确保在你的组件中使用 computed 属性内的 getter。
请注意，此代码基于 Vue 3。
英文:
Getters are basically computed properties for the vuex store. They take the state as their first argument and other getters as their second argument. If you want to send something as parameters to the store and then perform operations on it, you would have to define an action in the store and then call that action in your component and pass whatever data you need to, to it. Getters are meant to access your vuex state and return them to your component.
Example getter:
store.js
//initialize the store
state: {
todos: []
},
actions: {
getTodos(/*data from component*/) {
//set data in todos state and call this action in your component
state.todos = //data from component
}
},
getters: {
todos(state) {
return state.todos;
}
}
Edit:
Here's how your component file would look like.
component.vue
<input
type="text"
placeholder="Search here"
v-model="search"
/>
<script>
import { ref } from 'vue';
import { getProducts } from '../store';
const search = ref('');
const products = () => {
getProducts(search.value);
}
</script>
store.js
export const state = () => ({
products: [],
});
export const mutations = {
setProducts(state, data) {
state.products = data;
},
}
export const actions = {
async getProducts({ commit }, search) {
const result = await fetch()
//perform filter logic here
commit('setProducts', result);
},
}
export const getters = {
getProducts(state) {
return state.products;
},
};
Make sure to use the getter inside a computed property in your component.
Note that this code is based on Vue 3
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论