9、Vue3 crud案例

基于vue3、vuex、vue-router、ts 案例

效果

vue3crud.png

案例

• App.vue

<template>
  <div align="center" style="margin:20px;">
    <router-link to="/">首页</router-link> &nbsp;
    <router-link to="/about">关于</router-link>
  </div>
  <div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
  export default {
    name: "App"
  };
</script>

• main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 导入router和store
import router from './router/index'
import store from './store/index'

//
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

• src/router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'
export default createRouter({
  // 指定路由模式
  history: createWebHashHistory(),
  // 路由地址
  routes: [
    {
      path: '/',
      component: ()=> import('../pages/index.vue')
    },
    {
      path: '/about',
      component: ()=> import('../pages/about.vue')
    }
  ]
})

• src/store/index.ts

import { createStore } from 'vuex'
//
export default createStore({
  state: {
    name: 'zhagnsan',
    list: []
  },
  mutations: {
    // 添加
    addList(state: any, obj: any){
      //
      if(obj.index < 0){
        state.list.splice(0, 0 , {name: obj.name, age: obj.age});
      }else{
        this.commit('updateListByIndex', obj);
      }
    },
    // 删除
    deleteListByIndex(state: any, index: number){
      state.list.splice(index, 1)
    },
    // 修改
    updateListByIndex(state: any, obj: any){
      //
      state.list[obj.index] = {name: obj.name, age: obj.age};
    }
  }
})

• src/page/index.vue

<!-- 首页 -->
<template>
    <div align="center" style="margin-bottom: 10px;">
        姓名：<input type="text" v-model="name"/><br/><br/>
        年龄：<input type="text" v-model="age"/><br/><br/>
        <button @click="add">保存</button>
    </div>

   <table border="1" cellpadding="5" cellspacing="0" width="500" align="center">
       <thead> 
           <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
           </tr>
       </thead>
       <tbody style="text-align: center">
           <tr v-for="(item,index) in list">
               <td>{{(index+1)}}</td>
               <td>{{item.name}}</td>
               <td>{{item.age}}</td>
               <td>
                    <button @click="edit(index)">编辑</button> &nbsp;
                    <button @click="del(index)">删除</button>
               </td>
           </tr>
       </tbody>
   </table>
</template>

<script lang="ts">
import { useStore } from 'vuex'
import  { computed, reactive, toRefs } from 'vue'
export default {
  setup() {
    const store:any = useStore();
    // 获取数据集
    const list = store.state.list;
    // 定义
    const data:object = reactive({
        name: '',
        age: '',
        index: -1
    })
    // 添加操作
    const add:any = function():void {
        if(!data.name || !data.age){
            alert('姓名和年龄不能为空');
            return;
        }
        store.commit('addList', {
            name: data.name,
            age: data.age,
            index: data.index
        })
        //
        data.age = '';
        data.name = '';
        data.index = -1;
    }
    // 删除操作
    const del:any =  function (index: number) {
        store.commit('deleteListByIndex', index)
    }
    // 编辑
    const edit:any = function(index: number) {
        //
        var record = list[index];
        record.index = index;
        Object.assign(data, record);
    }
    return { ...toRefs(data), list, add, del, edit }
  },
}

</script>
<style lang='less'>
</style>

• src/page/about.vue

<!--  -->
<template>
  <div align="center">
       <a href="http://itssh.cn" target="_blank">圆梦人生</a>
  </div>
</template>

<script>
export default {
}

</script>
<style lang='less'>
</style>