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

資訊專(zhuān)欄INFORMATION COLUMN

Vuex 學(xué)習(xí)筆記

hzc / 3015人閱讀

摘要：是什么用來(lái)解決組件之間共用數(shù)據(jù)問(wèn)題的一個(gè)插件內(nèi)部結(jié)構(gòu)就是被共用的數(shù)據(jù)但是不可以被直接操作，不可以直接訪問(wèn)可以直接操作中的數(shù)據(jù)，可以定義中的數(shù)據(jù)如何被改變可以觸發(fā)對(duì)的改變，該觸發(fā)操作專(zhuān)業(yè)名詞為與的交互通過(guò)的方式來(lái)改變通過(guò)來(lái)讀取中的數(shù)據(jù)的使用方

VUEX是什么？

用來(lái)解決組件之間共用數(shù)據(jù)問(wèn)題的一個(gè)插件

Vuex 內(nèi)部結(jié)構(gòu)

State 就是被共用的數(shù)據(jù)（但是不可以被直接操作，不可以直接訪問(wèn)）

Mutations 可以直接操作（Mutate） State 中的數(shù)據(jù)，可以定義 State 中的數(shù)據(jù)如何被改變

Actions 可以觸發(fā) Mutations 對(duì)States的改變，該觸發(fā)操作專(zhuān)業(yè)名詞為commit

Components 與Vuex的交互

通過(guò) dispatch Actions 的方式來(lái)改變 State

通過(guò)Render來(lái)讀取State中的數(shù)據(jù)

Vuex的使用方法

新建一個(gè)store.js文件（位置可以自選）

在該文件中引入vue和vuex,并在vue中啟用vuex

Improve vue from "vue"
Improve vuex from "vuex"
vue.use(vuex)

在該文件中配置 state，mutations，actions

//這里的state是數(shù)據(jù)實(shí)際儲(chǔ)存的地方
const state={
    count:10
}
const mutations={
    add(state,param){
        state.count += param
    },
    reduce(state,param){
        state.count -= param
    }
}
const actions={
    add:({commit},param)=>{
        commit("add",param)
    },
    reduce:({commit},param)=>{
        commit("reduces",param)
    }
}

只有一個(gè)store配置的方法

將以上配置在Vuex對(duì)象中實(shí)例化并導(dǎo)出

export default new vuex.Store({
    state,
    mutations,
    actions
})

在main.js中引用該vuex的store實(shí)例

improt store from "./store"
new vue ({
    ......
    store,
    ......
})

在組件中使用vuex的store實(shí)例
在頁(yè)面中引用該實(shí)例state的值?$store.state.count
引入該實(shí)例的actions??

import {mapActions} from ‘vuex’
export default {
  methods:mapActions([‘a(chǎn)dd’,’reduce’])?????
}

頁(yè)面使用actions??@click="add(param)" @click="reduce(param)"

有多個(gè)store配置的方法

將以上配置在Vuex對(duì)象中實(shí)例化并導(dǎo)出

export default new vuex.Store({
    module:{
       a: {
            state,
            mutations,
            actions
        }
    }
})

在main.js中引用該vuex的store實(shí)例

improt store from "./store"
new vue ({
    ......
    store,
    ......
})

在組件中使用vuex的store實(shí)例
在頁(yè)面中引用該實(shí)例state的值 $store.state.a.count
調(diào)用該實(shí)例的actions??

  import {mapActions} from ‘vuex’
  export default {
      methods:mapActions("a",[‘a(chǎn)dd’,’reduce’])?????
  }

頁(yè)面使用actions??@click="add(param)" @click="reduce(param)"

這篇筆記主要是本人學(xué)習(xí)Vuex時(shí)候的知識(shí)總結(jié)，如果有不對(duì)的地方還請(qǐng)多多斧正

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

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

相關(guān)文章

  • Vue.js學(xué)習(xí)系列二 —— vuex學(xué)習(xí)實(shí)踐筆記（附DEMO）

    摘要：有興趣的同學(xué)可以查看之前發(fā)布的文章學(xué)習(xí)系列一學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列二學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列三和網(wǎng)絡(luò)傳輸相關(guān)知識(shí)的學(xué)習(xí)實(shí)踐學(xué)習(xí)系列四打包工具的使用學(xué)習(xí)系列五從來(lái)聊聊學(xué)習(xí)系列項(xiàng)目地址項(xiàng)目暫時(shí)有點(diǎn)亂，之后會(huì)進(jìn)行整理優(yōu)化。 上次學(xué)習(xí)了vue-router的使用，讓我能夠在各個(gè)頁(yè)面間切換，將頁(yè)面搭建了起來(lái)。這次則要學(xué)習(xí)vue的狀態(tài)管理模式——vuex。它類(lèi)似于redux來(lái)應(yīng)用的全局狀態(tài)。 注：本...

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

  • 用 Vuex 構(gòu)建一個(gè)筆記應(yīng)用

    摘要：如果不熟悉，在這個(gè)教程里面，我們會(huì)通過(guò)構(gòu)建一個(gè)筆記應(yīng)用來(lái)學(xué)習(xí)怎么用。這個(gè)是我們要構(gòu)建的筆記應(yīng)用的截圖你可以從下載源碼，這里是的地址。每當(dāng)用戶(hù)點(diǎn)擊筆記列表中的某一條時(shí)，組件會(huì)調(diào)用來(lái)分發(fā)這個(gè)會(huì)把當(dāng)前選中的筆記設(shè)為。 原文：Learn Vuex by Building a Notes App，有刪改。 本文假設(shè)讀者熟悉 Vuex 文檔 的內(nèi)容。如果不熟悉，you definitely sho...

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

  • Vue學(xué)習(xí)—— Vuex學(xué)習(xí)筆記

    摘要：的數(shù)據(jù)會(huì)在上顯示出來(lái)，用戶(hù)會(huì)根據(jù)上的內(nèi)容進(jìn)行操作，從而觸發(fā)，接著再去影響是單向數(shù)據(jù)流的方式驅(qū)動(dòng)的。當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，單向數(shù)據(jù)流的簡(jiǎn)潔性很容易被破壞。中的非常類(lèi)似于事件每個(gè)都有一個(gè)字符串的事件類(lèi)型和一個(gè)回調(diào)函數(shù)。 組件是Vue最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，意味著不同組件之間的數(shù)據(jù)是無(wú)法相互使用。組件間如何傳遞數(shù)據(jù)就顯得至關(guān)重要，這篇文章主要是介紹Vu...

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

  • 使用 Vuex + Vue.js 構(gòu)建單頁(yè)應(yīng)用

    摘要：鑒于該篇文章閱讀量大，回復(fù)的同學(xué)也挺多的，特地抽空寫(xiě)了一篇下的使用方法，傳送門(mén)使用構(gòu)建單頁(yè)應(yīng)用新篇華麗的分割線原文地址前言在最近學(xué)習(xí)的時(shí)候，看到國(guó)外一篇講述了如何使用和來(lái)構(gòu)建一個(gè)簡(jiǎn)單筆記的單頁(yè)應(yīng)用的文章。 鑒于該篇文章閱讀量大，回復(fù)的同學(xué)也挺多的，特地抽空寫(xiě)了一篇 vue2.0 下的 vuex 使用方法，傳送門(mén)：使用 Vuex + Vue.js 構(gòu)建單頁(yè)應(yīng)用【新篇】 ---------...

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

  • 使用 Vuex + Vue.js 構(gòu)建單頁(yè)應(yīng)用

    摘要：鑒于該篇文章閱讀量大，回復(fù)的同學(xué)也挺多的，特地抽空寫(xiě)了一篇下的使用方法，傳送門(mén)使用構(gòu)建單頁(yè)應(yīng)用新篇華麗的分割線原文地址前言在最近學(xué)習(xí)的時(shí)候，看到國(guó)外一篇講述了如何使用和來(lái)構(gòu)建一個(gè)簡(jiǎn)單筆記的單頁(yè)應(yīng)用的文章。 鑒于該篇文章閱讀量大，回復(fù)的同學(xué)也挺多的，特地抽空寫(xiě)了一篇 vue2.0 下的 vuex 使用方法，傳送門(mén)：使用 Vuex + Vue.js 構(gòu)建單頁(yè)應(yīng)用【新篇】 ---------...

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

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

0條評(píng)論

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