从引入到实例最详尽 vue.js引入vuex储存接口数据并调用的流程

项目终于做完了，博客也很久没更新了，写下这个项目用到的一些知识，以后大家也少踩点坑
第一步当然还是安装了，这里只介绍npm的安装方法，别的请自行百度。

npm install vuex --save

第二步就是调用，我在src文件夹简历了个store.js的文件，方便管理。然后在main.js里面引入

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

至此，安装基本完成，下面介绍这个东西的用法。vuex的好处我也不多说了，简单来说就是数据共享嘛，反正谁用谁知道。不要以为你的项目小就可以不用这个，它可以让你在开发中省掉很多事儿。
现在我的文件是这样的（项目框架是vue-cli3.0）：

接下来就开始在store里面写东西啦。其实这东西用法简单的一比，就是几个属性而已。最常用的就这四个:state,mutations,actions,getters.
state就是存死数据的，当然下面也可以改它的数据.

1.store

在store.js里面:

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    box: 123
  }
});

然后在你的组件里面引入一下(我这里直接引用了这四个家伙，实际开发的时候你用到啥引用啥就好，不然eslint又该出红线了)

import {
        mapGetters,
        mapState,
        mapMutations,
        mapActions

} from "vuex";
然后在计算属性里面写

  computed: {
    ...mapState(["box"])
  },

接下来在template里面直接调用，这个数据是共享的，在每一个组件里面想用都可以直接这么引入调用(加个点击事件，下面要用下)

<div class="page">
    {{box}}
</div>
<button @click="btn">按钮</button>

哈哈，界面里面估计都已经显示了123了吧。就是这么简单。

2.mutations

接下来看mutations，这个属性主要是修改store存储的值的，就比如说刚才那个box，就可以用这个玩意儿修改。
在store里面接着上面的写

export default new Vuex.Store({
  state: {
    box: 123
  },
  mutations: {
    someMutation(state, count) {
      state.box += count;
    }
  }
});

这个里面有两个参数，state,count，state就是上面那个state，count就是你要传入的数据，当然，你不传东西也可以，只是个方法而已。我这随便写了个案例。
接下来在你的组件里面的调用，这里调用是在methods里面写，毕竟人家是方法嘛，对吧！

...mapMutations(["someMutation"]),
    btn(){
      this.someMutation(22);
    }

这里我传了个值为22，写在了点击事件里面，然后就是开始点击,相信你现在看到已经变成145了。

3.actions
actions里面也是两个参数, 例如在store.js里面这么写：

actions: {
    getbox2(context,s) {
      return context.box;
    }
  }

我们可以通过第一个参数context来获取state或者getter里面的值，context.state或者context.getters直接就可以获取第二个参数s，就是我们传的值。
在组件里面我们直接这么写

methods:{
    ...mapActions(["getbox2"]),
    ...mapMutations(["someMutation"])
   }

然后直接调用

mounted(){
    this.getbox2(1234).then((res)=>{
          console.log(res)
    })
}

这里打印出来的是根据刚才在store里面返回的值有关，

getbox2(context,s) {
      return context.box;
    }

这样返回的就是123，若是

getbox2(context,s) {
          return s;
        }

这么写返回的就是你传入的那个s，打印出1234.
actions还可以直接调用mutations的方法。例如
getbox2(context) {

  return context.commit('someMutation');
}

然后在组件中直接调用

this.getbox2()

这样就直接运行了someMutation这个方法。值得一提的是actions是异步的，就是你想怎么用，想在哪用都是可以的。简单来说，就是你想改变state的值，就用mutations，如果你想用方法，就用actions

4.getters
getters就更加简单啦，直接在store里面，例如：

getters: {
    getbox(state) {
      return 1;
    }
  }

然后在组件的计算属性里面这么写：

computed: {
    ...mapGetters(["getbox"]),
    ...mapState(["box"])
  },

然后在template里面直接拿来用，

<div class="page">
    {{ getbox }}
    {{box}}
   <button @click="btn">按钮</button>
  </div>

简单来说，这东西就是vuex里面的计算属性，跟computed一个尿性。里面的state就是上面那个state。最终代码是这样的：

组件中:

<template>
  <div class="page">
    {{ getbox }}
    {{box}}
   <button @click="btn">按钮</button>
  </div>
</template>

<script type="text/ecmascript-6">
 import {
        mapGetters,
        mapState,
        mapMutations,
        mapActions
    } from "vuex";
export default {
  data() {
    return {
      count:0
    }
  },
  components: {
  },
  computed: {
    ...mapGetters(["getbox"]),
    ...mapState(["box"])
  },
  methods:{
    ...mapActions(["getbox2"]),
    ...mapMutations(["someMutation"]),
    btn(){
      this.someMutation(22);
    },
  },
  mounted() {
    //  this.getbox2().then((res)=>{
    //   console.log(res)
    // })
    this.getbox2()
    
  },
}
</script>

<style scoped lang="stylus">
</style>

在store.js中：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    box: 123
  },
  mutations: {
    someMutation(state, count) {
      // state.box += count;
      state.box++;
    }
  },
  actions: {
    getbox2(context) {
      return context.commit('someMutation');
    }
  },
  getters: {
    getbox(state) {
      return state.box;
    }
  }
});

main.js中：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

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

好了，大功告成，相信你们对这个所谓的状态管理工具有一定的了解了。有啥写的不太好的地方，请大家多多指教。