亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

LeviDing / 3580人閱讀

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

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

npm install vuex --save

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

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

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

接下來(lái)就開始在store里面寫東西啦。其實(shí)這東西用法簡(jiǎn)單的一比，就是幾個(gè)屬性而已。最常用的就這四個(gè):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
  }
});

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

import {
        mapGetters,
        mapState,
        mapMutations,
        mapActions

} from "vuex";
然后在計(jì)算屬性里面寫

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

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


    {{box}}

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

2.mutations

接下來(lái)看mutations，這個(gè)屬性主要是修改store存儲(chǔ)的值的，就比如說(shuō)剛才那個(gè)box，就可以用這個(gè)玩意兒修改。
在store里面接著上面的寫

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

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

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

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

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

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

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

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

然后直接調(diào)用

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

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

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

這樣返回的就是123，若是

getbox2(context,s) {
          return s;
        }

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

  return context.commit("someMutation");
}

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

this.getbox2()

這樣就直接運(yùn)行了someMutation這個(gè)方法。值得一提的是actions是異步的，就是你想怎么用，想在哪用都是可以的。簡(jiǎn)單來(lái)說(shuō)，就是你想改變state的值，就用mutations，如果你想用方法，就用actions

4.getters
getters就更加簡(jiǎn)單啦，直接在store里面，例如：

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

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

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

然后在template里面直接拿來(lái)用，


    {{ getbox }}
    {{box}}

簡(jiǎn)單來(lái)說(shuō)，這東西就是vuex里面的計(jì)算屬性，跟computed一個(gè)尿性。里面的state就是上面那個(gè)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");

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/92074.html

相關(guān)文章

  • 淺談MVC,MVP,MVVM漸進(jìn)變化及React與Vue比較

    摘要：將注意力集中保持在核心庫(kù)，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫(kù)。此示例使用類似的語(yǔ)法，稱為。執(zhí)行更快，因?yàn)樗诰幾g為代碼后進(jìn)行了優(yōu)化?；诘哪０迨沟脤⒁延械膽?yīng)用逐步遷移到更為容易。 前言 因?yàn)闆](méi)有明確的界定,這里不討論正確與否,只表達(dá)個(gè)人對(duì)前端MV*架構(gòu)模式理解看法,再比較React和Vue兩種框架不同.寫完之后我知道這文章好水,特別是框架對(duì)比部分都是別人說(shuō)爛的,而我也是打算把...

    DrizzleX 評(píng)論0 收藏0

  • 前端面試題總結(jié)——VUE（持續(xù)更新中）

    摘要：前端面試題總結(jié)持續(xù)更新中是哪個(gè)組件的屬性模塊的組件。都提供合理的鉤子函數(shù)，可以讓開發(fā)者定制化地去處理需求。 前端面試題總結(jié)——VUE（持續(xù)更新中） 1.active-class是哪個(gè)組件的屬性？ vue-router模塊的router-link組件。 2.嵌套路由怎么定義？ 在 VueRouter 的參數(shù)中使用 children 配置，這樣就可以很好的實(shí)現(xiàn)路由嵌套。 //引入兩個(gè)組件 ...

    SimonMa 評(píng)論0 收藏0

  • Vue.js學(xué)習(xí)

    摘要：一基礎(chǔ)學(xué)習(xí)模式下圖不僅概括了模式，還描述了在中是如何和以及進(jìn)行交互的。關(guān)于這一點(diǎn)我們將在后續(xù)反應(yīng)系統(tǒng)中討論。父組件通過(guò)向下傳遞數(shù)據(jù)給子組件，子組件通過(guò)給父組件發(fā)送消息。這個(gè)對(duì)象必須是普通對(duì)象原生對(duì)象，及原型屬性會(huì)被忽略。 Vue.js 是用于構(gòu)建交互式的 Web 界面的庫(kù)。Vue.js 提供了 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng)，具有簡(jiǎn)單、靈活的 API。 其實(shí)和Jquery一樣...

    TIGERB 評(píng)論0 收藏0

  • vuex入門

    摘要：使用，引入之后用進(jìn)行引用。在模板中引入們剛建的文件，并在模板中用輸出的值。在文件中加入兩個(gè)改變的方法。和單純的全局對(duì)象有以下兩點(diǎn)不同的狀態(tài)存儲(chǔ)是響應(yīng)式的。改變中的狀態(tài)的唯一途徑就是顯式地提交。 vuex 是什么？ Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。通俗的解釋就是，Vuex 就是為 vue 組件之間進(jìn)行數(shù)據(jù)共享而開發(fā)的插件。 vuex 什么時(shí)候用？ 實(shí)現(xiàn)數(shù)據(jù)...

    weakish 評(píng)論0 收藏0

  • 前端開發(fā)之走進(jìn)Vue.js

    摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。的新版本，的簡(jiǎn)稱。的包管理工具，用于同一管理我們前端項(xiàng)目中需要用到的包插件工具命令等，便于開發(fā)和維護(hù)。 Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。本文旨在幫助大家認(rèn)識(shí)Vue.js，了解Vue.js的開發(fā)流程，并進(jìn)一步理解如何通...

    zxhaaa 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<