Vuex 學習筆記

hzc 發布于2019-08-26 13:41 / 2915人閱讀

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

VUEX是什么？

用來解決組件之間共用數據問題的一個插件

Vuex 內部結構

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

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

Actions 可以觸發 Mutations 對States的改變，該觸發操作專業名詞為commit

Components 與Vuex的交互

通過 dispatch Actions 的方式來改變 State

通過Render來讀取State中的數據

Vuex的使用方法

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

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

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

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

//這里的state是數據實際儲存的地方
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)
    }
}

只有一個store配置的方法

將以上配置在Vuex對象中實例化并導出

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

在main.js中引用該vuex的store實例

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

在組件中使用vuex的store實例
在頁面中引用該實例state的值?$store.state.count
引入該實例的actions??

import {mapActions} from ‘vuex’
export default {
  methods:mapActions([‘add’,’reduce’])?????
}

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

有多個store配置的方法

將以上配置在Vuex對象中實例化并導出

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

在main.js中引用該vuex的store實例

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

在組件中使用vuex的store實例
在頁面中引用該實例state的值 $store.state.a.count
調用該實例的actions??

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

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

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

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109320.html

Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）

摘要：有興趣的同學可以查看之前發布的文章學習系列一學習實踐筆記附學習系列二學習實踐筆記附學習系列三和網絡傳輸相關知識的學習實踐學習系列四打包工具的使用學習系列五從來聊聊學習系列項目地址項目暫時有點亂，之后會進行整理優化。上次學習了vue-router的使用，讓我能夠在各個頁面間切換，將頁面搭建了起來。這次則要學習vue的狀態管理模式——vuex。它類似于redux來應用的全局狀態。注：本...

DobbyKim 2019-08-21 15:52 評論0 收藏0
用 Vuex 構建一個筆記應用

摘要：如果不熟悉，在這個教程里面，我們會通過構建一個筆記應用來學習怎么用。這個是我們要構建的筆記應用的截圖你可以從下載源碼，這里是的地址。每當用戶點擊筆記列表中的某一條時，組件會調用來分發這個會把當前選中的筆記設為。原文：Learn Vuex by Building a Notes App，有刪改。本文假設讀者熟悉 Vuex 文檔的內容。如果不熟悉，you definitely sho...

gggggggbong 2019-08-19 18:12 評論0 收藏0
Vue學習—— Vuex學習筆記

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

zzbo 2019-08-23 12:21 評論0 收藏0
使用 Vuex + Vue.js 構建單頁應用

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

tomorrowwu 2019-08-19 18:42 評論0 收藏0
使用 Vuex + Vue.js 構建單頁應用

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

cnsworder 2019-08-01 15:25 評論0 收藏0