從引入到實例最詳盡 vue.js引入vuex儲存接口數(shù)據(jù)并調(diào)用的流程

LeviDing 發(fā)布于2019-08-22 11:16 / 3520人閱讀

摘要：第二步就是調(diào)用，我在文件夾簡歷了個的文件，方便管理。然后在里面引入至此，安裝基本完成，下面介紹這個東西的用法。其實這東西用法簡單的一比，就是幾個屬性而已。例如然后在組件中直接調(diào)用這樣就直接運行了這個方法。

項目終于做完了，博客也很久沒更新了，寫下這個項目用到的一些知識，以后大家也少踩點坑
第一步當(dāng)然還是安裝了，這里只介紹npm的安裝方法，別的請自行百度。

npm install vuex --save

第二步就是調(diào)用，我在src文件夾簡歷了個store.js的文件，方便管理。然后在main.js里面引入

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

至此，安裝基本完成，下面介紹這個東西的用法。vuex的好處我也不多說了，簡單來說就是數(shù)據(jù)共享嘛，反正誰用誰知道。不要以為你的項目小就可以不用這個，它可以讓你在開發(fā)中省掉很多事兒。
現(xiàn)在我的文件是這樣的（項目框架是vue-cli3.0）：

接下來就開始在store里面寫東西啦。其實這東西用法簡單的一比，就是幾個屬性而已。最常用的就這四個:state,mutations,actions,getters.
state就是存死數(shù)據(jù)的，當(dāng)然下面也可以改它的數(shù)據(jù).

1.store

在store.js里面:

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

然后在你的組件里面引入一下(我這里直接引用了這四個家伙，實際開發(fā)的時候你用到啥引用啥就好，不然eslint又該出紅線了)

import {
        mapGetters,
        mapState,
        mapMutations,
        mapActions

} from "vuex";
然后在計算屬性里面寫

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

接下來在template里面直接調(diào)用，這個數(shù)據(jù)是共享的，在每一個組件里面想用都可以直接這么引入調(diào)用(加個點擊事件，下面要用下)


    {{box}}

哈哈，界面里面估計都已經(jīng)顯示了123了吧。就是這么簡單。

2.mutations

接下來看mutations，這個屬性主要是修改store存儲的值的，就比如說剛才那個box，就可以用這個玩意兒修改。
在store里面接著上面的寫

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

這個里面有兩個參數(shù)，state,count，state就是上面那個state，count就是你要傳入的數(shù)據(jù)，當(dāng)然，你不傳東西也可以，只是個方法而已。我這隨便寫了個案例。
接下來在你的組件里面的調(diào)用，這里調(diào)用是在methods里面寫，畢竟人家是方法嘛，對吧！

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

這里我傳了個值為22，寫在了點擊事件里面，然后就是開始點擊,相信你現(xiàn)在看到已經(jīng)變成145了。

3.actions
actions里面也是兩個參數(shù), 例如在store.js里面這么寫：

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

我們可以通過第一個參數(shù)context來獲取state或者getter里面的值，context.state或者context.getters直接就可以獲取第二個參數(shù)s，就是我們傳的值。
在組件里面我們直接這么寫

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

然后直接調(diào)用

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

這里打印出來的是根據(jù)剛才在store里面返回的值有關(guān)，

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

這樣返回的就是123，若是

getbox2(context,s) {
          return s;
        }

這么寫返回的就是你傳入的那個s，打印出1234.
actions還可以直接調(diào)用mutations的方法。例如
getbox2(context) {

  return context.commit("someMutation");
}

然后在組件中直接調(diào)用

this.getbox2()

這樣就直接運行了someMutation這個方法。值得一提的是actions是異步的，就是你想怎么用，想在哪用都是可以的。簡單來說，就是你想改變state的值，就用mutations，如果你想用方法，就用actions

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

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

然后在組件的計算屬性里面這么寫：

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

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


    {{ getbox }}
    {{box}}

簡單來說，這東西就是vuex里面的計算屬性，跟computed一個尿性。里面的state就是上面那個state。最終代碼是這樣的：

組件中:

在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");

好了，大功告成，相信你們對這個所謂的狀態(tài)管理工具有一定的了解了。有啥寫的不太好的地方，請大家多多指教。