mobx和vuex的简单对比及快速使用

最近在将公司react项目迁移到vue上，react中使用的状态管理机制是mobx，而vue中使用的是vuex; 为了更快速的迁移代码，所以简单对比回忆了一下vuex和mobx之间的区别，以下是mobx和vuex的官网手册目录对比：

 
1，mobx的使用方式，可能若干组件使用一个store.js：
@observable:   以此为前缀的普通变量，将是全局变量；若该变量的类型是对象或者数组，需要使用observale(对象/数组) ，的方式定义全局变量；用于定义的类
@action:  以此为前缀的函数，是唯一可以修改 @observable定义的全局变量的函数；用于定义的类
@computed:  以此为前缀的函数，可以获取全局变量并计算值；用于定义的类
@observer： 以此为前缀的类，可以访问以@observable为前缀定义的全局变量；用于调用@observable的类

在store.js文件中定义全局变量@observable， @action，@computed

store.js文件

import { observable, action } from "../node_modules/mobx";   //react里面用到啥就需要引入啥
class WaterTool {
  @observable maxDepth = 100;  //这个maxDepth 是全局观测变量
  constructor() {}
  @action
  setMaxDepth(val) {
    this.maxDepth = val;   //这个setMaxDepth是可以修改maxDepth 的函数
  }
  @computed get total() {
        return this.maxDepth*10;
    }                         //这个total可以获取全局变量并计算
}
export  const  warterTool = new WaterTool();  

///在其他的react.js文件中使用@observer

suiban.js文件

import { waterTool } from "./store";     
@observer
class  suibian extends React.Component{
  constructor(props) {
    super(props);
  }
 function hi(){
   waterTool.setMaxDepth(100);   //直接以属性方式调用
    console.log(waterTool.total);  //直接以属性方式调用
}
 return(
    <div> waterTool.maxDepth </div>   //直接以属性方式调用
)

}

2，vuex的使用方式,  所有组件可能只有一个store.js文件
首先在main.js引入：

import Vuex from  "vuex";
Vue.use(Vuex);

 比较重要的几个前缀：
state:  存储全局变量（相当于mobx的@observable）；用于定义的类
getters:  获取全局变量并计算（相当于mobx的@computed） ；  用于定义的类
mutations:  唯一可以修改全局变量的函数集（相当于mobx的@action）；用于定义的类
actions:  据说，mutations只能处理同步的代码，所以官方补充一个actions用于处理异步的代码；用于定义的类

this.$store.state： 获取全局变量 ； 用于调用的类
this.$store.commit: 调用mutations中的函数；用于调用的类
this.$store.dispatch: 调用actions中的函数；用于调用的类

//store.js文件
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {   count:10  },
  getters: {   getCount(state){return state.count}    },
  mutations: {  setCount(state,num){ state.count = num  },
  actions: {},
  modules: {}
});

在main.js中挂载store.js文件，这样所有的组件都可以用了
import Vue from "vue";
import App from "./App.vue";

import store from "./store";
new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

//在qita.vue文件中

<template>
</template>

<script>
export default{
    name:'qita',
    methods:{
        add(){
            console.log(this.$state.count);  //不需要import，直接调用store.js内容
            }
        }
    }

</script>

<style>
</style>

2.1，刚才提到，vue使用vuex一般所有组件使用同一个store.js文件，这样的话可能这个store会变的很混乱拥挤，为了快速找到某个组件需要的全局变量，modules属性出现，将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter，相当于是归类了：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

3, 有些时候组件之间都是独立的，仅仅几个组件之间有关系，而大多数组件之间是没有数据传递的，这个时候使用vuex就很没有意义，因为你把小部分组件需要访问的少部分变量，放到全局可以访问的地方，其他组件根本不需要访问。这个时候就直接把公共变量放到一个独立 的js文件里，然后把公共全局变量放到类中最后export一下就可以了。