Vue之Vuex的商品列表项目（router/store）

1.功能描述

        商品列表，包含商品名称和商品价格字段，可以编辑和删除。展示的数据必须保存到Vuex，页面跳转使用Vue-router来实现

要求：

（1）商品列表默认是空，点击“添加商品”按钮后会从事先定义好的商品数组里随机添加一些商品信息，每个商品可生成一个id，代表商品唯一，并保存的Vuex。

（2）编辑时会跳转到编辑页面，默认进入编辑页面时展示该商品的信息，商品信息可以修改，修改完并提交完之后会自动跳转到商品的列表页面，这时候刚才编辑的商品信息就会发生变化。

（3）在列表页面点击“删除”按钮则对应的商品信息会被实时删除

2.效果图

3.代码部分

 建立对应包

代码部分

<!--EditStore.vue-->
<template>
  <div>
    <h3>编辑商品</h3>
    <p>商品名称： <input v-model="goodName" type="text"/></p>
    <p>商品价格： <input v-model="goodPrice" type="number"/></p>
    <input type="button" @click="submit" value="提交"/>
  </div>
</template>

<script>

export default {
  props: ['id'],
  computed: {
    goodInfo() {
      return this.$store.state.goodsList.filter(item => item.id === this.id)[0]
    }
  },
  methods: {
    submit() {
      this.$store.commit({
        type: 'updateGood',
        id: this.id,
        name: this.goodName,
        price: this.goodPrice
      })
      this.$router.push('/index')
    }
  },
  data() {
    return {
      goodName: '',
      goodPrice: 0
    }
  },
  mounted() {
    this.goodName = this.goodInfo.name
    this.goodPrice = this.goodInfo.price
  }
}
</script>

<!--IndexStore.vue-->
<template>
  <div>
    <h3 style="margin-left: 200px">商品列表</h3>
    <ul>
      <li>
        <span>商品名称</span>
        <span>价格</span>
        <span>操作</span>
      </li>
      <li v-for="(good, index) in goodsList" :key="index">
        <span>{{ good.name }}</span>
        <span>{{ good.price }}</span>
        <span style="color: red; cursor: pointer;">
          <em @click="delGood(good.id)">删除</em>
          <em @click="editGood(good.id)">编辑</em>
        </span>
      </li>
      <button @click="add">添加商品</button>
    </ul>
  </div>
</template>

<script>
export default {
  name:'IndexStore',
  computed: {
    goodsList() {
      return this.$store.state.goodsList
    }
  },
  data() {
    return {
      goods: [
        { name: '洗衣机', price: 990 },
        { name: '油烟机', price: 2239 },
        { name: '电饭煲', price: 200 },
        { name: '电视机', price: 880 },
        { name: '电冰箱', price: 650 },
        { name: '电脑', price: 4032 },
        { name: '电磁炉', price: 210 }
      ]
    }
  },
  methods: {
    add() {
      const { name, price } = this.randomGood()
      this.$store.commit({ type: 'addGood', name, price })
    },
    randomGood() {
      return this.goods[parseInt(Math.random() * 7)]
    },
    delGood(id) {
      this.$store.commit('delGood', id)
    },
    editGood(id) {
      this.$router.push({ name: 'Edit', params: { id } })
    }
  }
}
</script>

<style>
#app ul li {
  list-style: none;
  width: 400px;
  display: flex;
  justify-content: space-between;
}
</style>

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import EditStore from "@/components/EditStore.vue";
import IndexStore from "@/components/IndexStore.vue";
Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        redirect: '/index'
    },
    {
        path: '/index',
        component: IndexStore,
    },
    {
        path: '/edit/:id',
        component: EditStore,
        name: 'Edit',
        props: true
    }
];

const router = new VueRouter({
    routes
});

export default router;

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        goodsList: []
    },
    mutations: {
        addGood(state, { name, price }) {
            state.goodsList.push({ id: state.goodsList.length + 1, name, price })
        },
        delGood(state, id) {
            state.goodsList.splice(
                state.goodsList.findIndex(item => item.id === id),
                1
            )
        },
        updateGood(state, { id, name, price }) {
            state.goodsList.forEach(item => {
                if (item.id === id) {
                    item.name = name
                    item.price = price
                }
            })
        }
    }
})

// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import store from './tool/store'
import App from './App.vue'
import router from "@/tool/router";

Vue.use(Vuex)
Vue.use(VueRouter)


new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
})

---

如果有vue报错可以去看：https://blog.csdn.net/zywmac/article/details/134680404?spm=1001.2014.3001.5501​​​​​​​

 App.vue是创建项目的时候就有的，没改变，也没删除。

请同学们先赞后看养成习惯🤩🤩🤩🤩🤩🤩🤩🤩🤩