Element-ui框架完成vue2项目的vuex的增删改查

看效果图是否是你需要的

这是原来没有Element-ui框架的

 首先，你要在你的项目里安装Element-ui
yarn命令

 yarn add element-ui

npm命令

npm install element-ui --save

 好了现在可以粘贴代码

//main.js
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './tool/store'
import App from './App.vue'
import router from '@/tool/router'

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

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

//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) {
            const index = state.goodsList.findIndex(item => item.id === id)
            if (index !== -1) {
                state.goodsList.splice(index, 1)
            }
        },
        updateGood(state, { id, name, price }) {
            const good = state.goodsList.find(item => item.id === id)
            if (good) {
                good.name = name
                good.price = price
            }
        }
    }
})

//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