成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

hzc / 2996人閱讀

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

VUEX是什么？

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

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

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

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

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

Components 與Vuex的交互

通過 dispatch Actions 的方式來改變 State

通過Render來讀取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對象中實(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í)例
在頁面中引用該實(shí)例state的值?$store.state.count
引入該實(shí)例的actions??

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

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

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

將以上配置在Vuex對象中實(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í)例
在頁面中引用該實(shí)例state的值 $store.state.a.count
調(diào)用該實(shí)例的actions??

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/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í)系列五從來聊聊學(xué)習(xí)系列項(xiàng)目地址項(xiàng)目暫時(shí)有點(diǎn)亂，之后會(huì)進(jìn)行整理優(yōu)化。 上次學(xué)習(xí)了vue-router的使用，讓我能夠在各個(gè)頁面間切換，將頁面搭建了起來。這次則要學(xué)習(xí)vue的狀態(tài)管理模式——vuex。它類似于redux來應(yīng)用的全局狀態(tài)。 注：本...

    DobbyKim 評論0 收藏0

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

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

    gggggggbong 評論0 收藏0

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

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

    zzbo 評論0 收藏0

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

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

    tomorrowwu 評論0 收藏0

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

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

    cnsworder 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<