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

<!-- EditStore.vue -->
<template>
  <div>
    <h3>编辑商品</h3>
    <el-form :model="form" label-width="80px">
      <el-form-item label="商品名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input-number v-model="form.price" controls-position="right" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

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

<!-- IndexStore.vue -->
<template>
  <div>
    <h3 style="margin-left: 200px">商品列表</h3>
    <el-table :data="goodsList" border style="width: 600px; margin-left: 200px">
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="delGood(scope.row.id)">删除</el-button>
          <el-button type="primary" size="mini" @click="editGood(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button style="margin-left: 200px; margin-top: 10px" type="primary" @click="add">添加商品</el-button>
  </div>
</template>

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