Vuex學習

codeKK 發布于2019-08-20 11:19 / 3293人閱讀

摘要：參考使用構建單頁應用使用和實現購物車場景配置在下創建一個文件夾叫做。入口文件，在根組件調用，然后所有子組件可以共享數據。掛載獲取數據及操作從拿數據，然后渲染到頁面上如果需要修改可以調用獲取狀態數據狀態變更事件

參考

使用 Vuex + Vue.js 構建單頁應用

使用Vue.js和Vuex實現購物車場景
vue-demo-collection

配置Vuex

在src下創建一個文件夾叫做vuex。里面定義三個文件。

mutation-types.js 定義類型的

// src/vuex/mutation-types.js
export const SET_HEADER_TITLE = "SET_HEADER_TITLE"

actions.js 操作，可以分解成多個文件

// src/vuex/actions.js
/**
 * 用統一的函數處理并分發mutations。
 * @param type
 * @returns {function({dispatch: *}, ...[*]): *}
 */
function makeAction (type) {
    return ({ dispatch }, ...args) => dispatch(type, ...args)
}

import {
    SET_HEADER_TITLE
} from "./mutation-types"

/**
 * actions
 */
export const setTitle = makeAction(SET_HEADER_TITLE)

store.js 入口文件，在根組件調用，然后所有子組件可以共享數據。

// src/vuex/store.js
import Vue from "vue"
import Vuex from "vuex"
//import createLogger from "vuex/logger"

Vue.use(Vuex)
//Vue.config.debug = true
//const debug = process.env.NODE_ENV !== "production"

// 導入各個模塊的初始狀態和 mutations
import index from "./modules/index"
export default new Vuex.Store({
    // 組合各個模塊
    modules: {
        index
    },
    //strict: debug,
    //moddlewares: debug ? [createLogger()] : []
})

modules/index.js 只是例子用的，一個index的操作，需要定義數據的狀態和mutation。actions.js只是分發操作。

// src/vuex/modules/index.js
import {
    SET_HEADER_TITLE
} from "../mutation-types"

const state = {
    title: "default",
    info: {
        name:""
    }
}

const mutations = {
    [SET_HEADER_TITLE](state, newTitle) {
        state.title = newTitle
    }
}

export default {
    state,
    mutations
}

掛載store

// src/App.vue
import store from "./vuex/store"
import HeaderComponent from "./components/header"
import FooterComponent from "./components/footer"
export default {
    store,
    components: {
        HeaderComponent,
        FooterComponent
    }
}

獲取數據及操作

// src/components/header.vue
// 從vuex拿數據，然后渲染到頁面上
// 如果需要修改可以調用setTitle
import { setTitle } from "../vuex/actions"
export default {
    vuex: {
        //獲取vuex狀態數據
        getters: {
            title: state => state.title,
            info: ({index}) => index.info
        },
        //狀態變更事件
        actions: {
            setTitle
        }
    }
}

GPU云服務器云服務器 Vuex vuex cdn Vue_Vuex 學習機器學習學習

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

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

Vuex源碼學習（一）功能梳理

摘要：我們通常稱之為狀態管理模式，用于解決組件間通信的以及多組件共享狀態等問題。創建指定命名空間的輔助函數，總結的功能首先分為兩大類自己的實例使用為組件中使用便利而提供的輔助函數自己內部對數據狀態有兩種功能修改數據狀態異步同步。 what is Vuex ? 這句話我想每個搜索過Vuex官網文檔的人都看到過，在學習源碼前，當然要有一些前提條件了。了解Vuex的作用，以及他的使用場景。 ...

livem 2019-08-23 16:11 評論0 收藏0
Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）

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

DobbyKim 2019-08-21 15:52 評論0 收藏0
Vuex 學習筆記

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

hzc 2019-08-26 13:41 評論0 收藏0
Vuex源碼學習（二）脈絡梳理

摘要：各位看官沒看過功能梳理的可以先閱讀下源碼學習一功能梳理前車之鑒有了源碼學習的經驗，每次看認真鉆研源代碼的時候都會抽出一小段時間來大體瀏覽一遍源代碼。大體了解這個源代碼的脈絡，每個階段做了什么，文件目錄的劃分。各位看官沒看過功能梳理的可以先閱讀下Vuex源碼學習（一）功能梳理. 前車之鑒有了vue-router源碼學習的經驗，每次看認真鉆研源代碼的時候都會抽出一小段時間來大體瀏覽一...

chenjiang3 2019-08-23 16:18 評論0 收藏0
Vue學習—— Vuex學習筆記

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

zzbo 2019-08-23 12:21 評論0 收藏0