vue+vuex+axios写一个新增功能
时间: 2023-08-04 07:06:20 浏览: 46
好的,以下是一个简单的示例:
首先,需要在 Vue 项目中安装 Vuex 和 Axios:
```
npm install vuex axios --save
```
然后,在 src 目录下新建一个 store 目录,用于存放 Vuex 相关代码:
```
src/
├── store/
│ ├── actions.js
│ ├── mutations.js
│ ├── state.js
│ └── store.js
└── ...
```
接着,在 state.js 文件中定义状态:
```javascript
export default {
products: []
}
```
在 mutations.js 文件中定义提交状态变化的方法:
```javascript
export default {
ADD_PRODUCT(state, product) {
state.products.push(product)
}
}
```
在 actions.js 文件中定义提交 mutations 中方法的逻辑:
```javascript
import axios from 'axios'
export default {
addProduct({ commit }, productData) {
axios.post('/api/products', productData)
.then(response => {
const product = response.data
commit('ADD_PRODUCT', product)
})
.catch(error => {
console.error(error)
})
}
}
```
在 store.js 文件中创建 Vuex store:
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions
})
```
最后,在组件中使用 Vuex:
```vue
<template>
<div>
<form @submit.prevent="addProduct">
<input type="text" v-model="name" placeholder="Product Name">
<input type="text" v-model="price" placeholder="Product Price">
<button type="submit">Add Product</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
price: ''
}
},
methods: {
addProduct() {
const productData = {
name: this.name,
price: this.price
}
this.$store.dispatch('addProduct', productData)
this.name = ''
this.price = ''
}
}
}
</script>
```
以上代码中,组件通过调用 `this.$store.dispatch('addProduct', productData)` 来触发 `addProduct` action,然后 action 会调用 `axios.post` 方法向服务器提交数据,成功后再通过调用 `commit('ADD_PRODUCT', product)` 来触发 mutations 中的 `ADD_PRODUCT` 方法,从而改变状态。最后,组件通过 `v-model` 绑定表单输入框的值,将输入的数据传递给 `addProduct` 方法,完成新增功能。