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

1.功能描述

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

要求：

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

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

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

2.效果图

3.代码部分

 建立对应包

代码部分

// 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是创建项目的时候就有的，没改变，也没删除。

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