组件化开发中使用Vuex存储数据

记录一下开发中用到的知识
在Store中新建一个js文件，下面用文件名表示

const state={
   xxxData:[ ]//使用一个数组来存储数据
}

const mutations={
  //将数据存储到数组中
  SET_DATA(state,payload){
     state.xxxData.push(payload.menu);//每次存储一条数据
  },
  //删除某条数据
  DELETE_DATA(state,payload){
    let index=0;
    for(let item in state.xxxData){//假如每次存储的是一个对象，对象有一个唯一标识id，那么就可以利用这个id来删除一条数据
      if(state.xxxData[item].id===payload.menu){
        index=item;
      }
    }
    state.xxxData.splice(index,1);//删除一条数据
  },
  
  //清空数组
  CLEAR_DATA(state){
    state.xxxData=[]; //清空这个数组，切换页面时可能会用到
  }
}

const actions = {

}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
}

在页面中操作vuex

//存数据
this.$store.commit(
   "文件名/SET_DATA",
   {
      menu: menu
   }
);
//删除数据
this.$store.commit(
   "文件名/DELETE_DATA",
   {
      menu: menu
   }
 );
//每次切换页面，清空数据
  beforeDestroy () {
    this.$store.commit(
      "文件名/CLEAR_DATA"
    );
  }
//在页面中接收数据，监听vuex
watch: {
   "$store.state.文件名.xxxData": function () {
     // 获取vuex中的选择列表
     this.array = this.$store.state.文件名.xxxData;
   }
 };

随便写写，看不懂的可以私信讨论一下。