点击按钮往vuex中传数据
时间: 2023-08-14 14:13:03 浏览: 76
在 Vue.js 中,我们可以通过使用 `mapActions` 辅助函数来将数据传递到 Vuex。以下是一个简单的示例:
1. 首先,在你的 Vue 组件中导入 `mapActions` 辅助函数和你在 Vuex 中定义的 action:
```javascript
import { mapActions } from 'vuex';
export default {
// ...
methods: {
...mapActions(['updateData']),
sendDataToVuex(data) {
this.updateData(data);
},
},
// ...
};
```
2. 然后,在 Vuex 的 actions 中定义 `updateData` 方法来接收传递的数据:
```javascript
// 在 Vuex 的 actions 中
const actions = {
updateData({ commit }, data) {
commit('SET_DATA', data);
},
};
```
3. 接下来,在 Vuex 的 mutations 中定义 `SET_DATA` 方法来更新数据:
```javascript
// 在 Vuex 的 mutations 中
const mutations = {
SET_DATA(state, data) {
state.data = data;
},
};
```
这样,当你调用 `sendDataToVuex` 方法并传递数据时,数据就会被发送到 Vuex 中,并通过 `SET_DATA` 方法进行更新。
请注意,以上只是一个简单的示例,实际情况可能会根据你的具体需求有所不同。
阅读全文