一次性比较目前前端最流行的状态管理,mobx,vuex,redux-saga使用方式用方式

import request from '../../utils/request';
import PublicService from '../../services/PublicService'
import PointManageService  from '../../services/stationRule/pointManageService'

export default {
  namespace: 'pointManage',
  state: {

    selectedRows:[], // 选中行
    deviceId:'', // 设备id 用来获取左侧数据参数
    size: 10,
    page: 1,
    total: 20,
    initData:{},
    loading: false,
    dataSource:[],
    isVisible:false,
    treeData:[],
  },
  effects: {
    //获取右侧数据
    *getRightData({payload},{put,call,select}){
      let deviceId = yield select(state => state.pointManage.deviceId);
      let res = yield call(PointManageService.getRightData,deviceId);
    },

    *submit({payload},{put,call,select,}){
      yield put({type:'saveInfo',payload:{isVisible:false}})
    },

    * saveInfo({payload}, {put, call, take, select}) {
      let obj = PublicService.deepClone(payload);
      yield put({type: 'save', payload: {...obj}});
    }
  },
  reducers: {
    save(state, {payload}) {
      console.log(payload, 'reduce');
      return {...state, ...payload};
    },
  },
};

handleOk() {
  this.props.dispatch({type:'pointManage/submit'})
};

import Service from './Service';
import {observable, computed, autorun} from 'mobx';

export default new class GStore {

  constructor() {
    // 获取页面列表数据 autorun 为mobx提供方法,当函数里面变量发生改变会自动调用此函数
    autorun(async () => {
      this.geekStyleList.isLoading = true;
      let params = {
        currentPage: this.pageInfo.currentPage,
        pageSize: this.pageInfo.pageSize,
        sortWay: this.query.sortWay,
        skillId: this.query.skillId,
        keyWord: this.query.keyWord
      };
      try {
        let res = await Service.getGList(params);
        let {data} = res;
        if (res.code === '0' && data && data.gList) {
          this.pageInfo.total = data.pageCount;
          this.gStyleList.list = data.gList;
          this.gStyleList.isLoading = false
        }
      }
      catch (e) {
        console.log(e)
      }
    })
  }

  service = Service;
 


  // 列表数据,写成一个对象方便以后维护
  @observable gStyleList = {
    isLoading: true,
    list: []
  };

  // 以下为搜索条件
  @observable query = {
    sortWay: '',
    skillId: '全部',
    keyWord: ''
  };
  // page相关数据
  @observable pageInfo = {
    currentPage: 1,
    pageSize: 12,
    total: 110
  };
  // 当跳转页面时候 需要执行的函数
  pageChange = (page) => {
    this.pageInfo.currentPage = page
  };

  // 搜索条件改变时候需要调用的函数
  onQueryChange = (key, value) => {
    this.query[key] = value;
    this.pageInfo.currentPage = 1;
  };
}

import vue from 'vue';
import Vuex from 'vuex';
import service from '../service/service'
import PubliceServeice from '../service/PublicService'

vue.use(Vuex);

const myStore = new Vuex.Store({
  state: {
    categoryList: [], // 菜谱目录list
    menuList: [], // 菜谱list
    menu: [], // 单个菜谱
    collectedArray: [], // 已经被收藏的列表,从localStorage中获取的
    current: 1, // 获取第一页的菜谱数据
    categoryId: '', // 保存点了首页哪个目录的id
    isCollected: false, // 是否被收藏
    isLoading: true
  },

  mutations: {
    //--以下为首页调用方法--//

    // 获取首页类名数据
    getCategory: async (state) => {
      state.isLoading = true;
      await service.getCategory()
        .then(res => {
          state.categoryList = res.data.result;
          state.categoryList.forEach(item => {
            item.isShow = false;
            state.isLoading = false
          })
        });
    },
    // 获取用户收藏列表数据
    getCollectedMenu(state) {
      state.collectedArray = PubliceServeice.getStoreage('collected') || [];
    },
    // 点击展开类名详细数据
    accordionHandle(state, parentId) {
      let lists = state.categoryList;
      let item = lists.find(item => item.parentId === parentId);
      let showBoolean = item.isShow;
      lists.forEach(item => {
        item.isShow = false;
      });
      item.isShow = !showBoolean;
      state.categoryList = JSON.parse(JSON.stringify(lists));
    },
    // 点击搜索调用函数
    getSearchResult(state, menu) {
      service.getMenu({menu})
        .then(res => {
          state.menuList = res.data.result.data;
        })
    },
    // 获取唯一的菜谱
    getUniqueMenu(state, id) {
      let array = new Array(state.collectedArray.find(item => item.id === id)) || [];
      state.isCollected = array[0] ? true : false; // 根据localstorage里的数据来判断是否被收藏了
      state.menu = state.menuList.filter(item => item.id === id);
    },
    // 点击收藏时触发的函数
    collectHandle(state) {
      let array = state.collectedArray;
      let newArray = [];
      if (state.isCollected) {
        newArray = array.filter(item => item.id !== state.menu[0].id);
        PubliceServeice.setStoreage('collected', newArray);
        PubliceServeice.showToast('取消成功', 'success');
        this.commit('getCollectedMenu')
      } else {
        array.push(state.menu[0]);
        PubliceServeice.setStoreage('collected', state.collectedArray);
        PubliceServeice.showToast('收藏成功', 'success')
      }
      state.isCollected = !state.isCollected;
    },
    getCollect(state, id) {
      let array0 = new Array(state.collectedArray.find(item => item.id === id)) || [];
      state.isCollected = array0[0] ? true : false; // 根据localstorage里的数据来判断是否被收藏了

      let array = state.collectedArray; // 收藏列表菜谱
      let array2 = state.menuList; // 首页点击进去菜谱列表
      let array3 = [...array, ...array2];
      state.menu = [array3.find(item => item.id === id)];
    },
    async categoryHandle(state, id, first) {
      if (id !== undefined) {
        state.categoryId = id;
      }
      state.isLoading = true;
      await service.getByCategory({categoryId: state.categoryId, current: state.current})
        .then(res => {
          state.menuList = [...state.menuList, ...res.data.result.data];
          state.current++;
          state.isLoading = false
        })
    },
    save(state, payload) {
      let obj = {...state, ...payload};
      state = JSON.parse(JSON.stringify(obj))
    }
  },

  actions: {}

});


export default myStore

<script>
  import store from '../../models/store';
  import config from '../../config';
  import myPanel from '../../components/myPanel'
  export default {

    data(){
      return{
      }
    },
    methods:{

    },
    components:{
      myPanel
    },
    computed:{
      img(){
        return store.state.menu[0].albums[0]
      }
    },
    mounted(){
      wx.setNavigationBarTitle({  title: store.state.menu[0].title})
    }


  }
</script>