1.uniapp中用vuex状态管理来实现列表新增修改

最新推荐文章于 2024-10-17 15:09:22 发布

liuwang000

最新推荐文章于 2024-10-17 15:09:22 发布

阅读量132

点赞数

文章标签： uni-app vue

本文链接：https://blog.csdn.net/liuwang000/article/details/131947261

版权

文章展示了在Vue.js应用中，如何在store.index.js的state中使用mutations来替换特定id的对象。在table.vue组件中触发changeAll方法，更新manageLv,Name和Select属性后，调用commit进行对象的替换操作。

摘要由CSDN通过智能技术生成

store.index.js中

state: { //存放状态
       managaeList: [
           {
               id: 0,
               manageType: '管理员',
               manageName: '张三',
               rule: ['查看']
           },
           {
               id: 1,
               manageType: '一级管理员',
               manageName: '李四',
               rule: ['查看', '新增']
           },
           {
               id: 2,
               manageType: '二级管理员',
               manageName: '王五',
               rule: ['查看', '新增', '修改']
           },
           {
               id: 3,
               manageType: '超级管理员',
               manageName: '小明',
               rule: ['查看', '新增', '修改', '删除']
           }
       ],

   },
   mutations: {
   replaceObject(state, data) {
this.state.managaeList = this.state.managaeList.map((t)=>{
       return t.id === data.id ? data : t;
   }); // 找到要替换的对象的索引
}
   }

table.vue

// 修改
           changeAll(){
               console.log(this.manageLv)
               console.log(this.Name)
               // 新数组
               const bianji = {
                   id: this.messge.id,
                   manageType : this.Name,
                   manageName : this.manageLv,
                   rule : this.Select
               }
               console.log(bianji)
               this.$store.commit('replaceObject', bianji);
           },