vue2中vuex实际操作例子

---

前言

提示：vuex实际操作例子：

vuex实际操作例子

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vuex实际操作例子过程

在store文件夹下添加下面例子

// 添加维修对象  保存的数组
export default {
	// 为当前模块开启命名空间
	namespaced: true,
	// 模块的 state 数据
	state: () => ({
		orderItems: []
	}),
	// 模块的 getters 属性
	getters: {
		getOrderItems: state => state.orderItems,
	},
	// 模块的 mutations 方法
	mutations: {
		setOrderItems(state, flag) {
			state.orderItems.push(flag);
		},
		setRemove(state, flag) {
			state.orderItems = [];
		},
		setDelete(state, flag) {
			for (let i = 0; i < state.orderItems.length; i++) {
				if (state.orderItems[i].deviceId === flag) {
					state.orderItems.splice(i, 1)
					break;
				}
			}
		},
	},

	// 模块的 actions 方法
	actions: {
		acOrderItems({
			commit
		}, orderItems) {
			commit('setOrderItems', orderItems)
			//setOrderItems方法异步操作mutations里面的方法
		},
		acRemove({
			commit
		}, orderItems) {
			commit('setRemove', orderItems)
			//setRemove方法异步操作mutations里面的方法
		},
		acDelete({
			commit
		}, deleteId) {
			commit('setDelete', deleteId)
			//setDelete 方法异步操作mutations里面的方法
		},
	}
}

二、在文件下操作vuex里面的对应的方法

1.删除操作示例

代码如下（示例）：

 // 点击删除弹窗确定
    deleteButton() {
      this.acDelete(this.deleteId);
    //this.deleteId  传入对应的id
    //this.acDelete()  调用的vuex里面的actions 异步操作
    },

  //页面关闭清空vuex里面的数据
 beforeDestroy() {
    this.acRemove();
    //使用vuex里面的方法  清空
  },

2.添加情况下

代码如下（示例）：

      computed: {
      //先用计算属性获取之前存在的数据
         ...mapGetters("deviceAdd", ["getOrderItems"]),
       },
         ...mapActions("deviceAdd", ["acOrderItems"]),

         //先判断添加之前的是不是有重复的
         //this.getOrderItems  是vuex里面的数据
         let flag = this.getOrderItems.some((item) => {
              return item.deviceId === this.form.deviceId;
            });
            if (flag) {
              this.$navigate._error("维修对象已存在");
              return;
           } else {
           //在调用vuex里面的方法实现数据添加
              this.acOrderItems(this.form);
         }

待更新。。。。。