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

資訊專欄INFORMATION COLUMN

vuex 使用

Hanks10100 / 2368人閱讀

摘要：學習筆記存儲全局的狀態(tài)數(shù)據(jù)，在整個的所有組件里面都可以訪問對應原生的定義的是一系列操作里面數(shù)據(jù)的方法需要注意的是參數(shù)的寫法類似于原生里面的就是里面的參數(shù)傳遞過來的參數(shù)對里面數(shù)據(jù)的一個過濾處理對應原生的例如當我們改變里面的數(shù)據(jù)的時候，會監(jiān)

Vuex 學習筆記

store.js 存儲全局的狀態(tài)數(shù)據(jù)，在整個vue的所有組件里面都可以訪問 對應原生的 data

const state = {
    count: 1
}

export default state;

mutations.js 定義的是一系列操作state里面數(shù)據(jù)的方法 （ 需要注意的是參數(shù)的寫法 ）類似于原生里面的methods

    const mutations = {
        // state就是store里面的參數(shù)  num傳遞過來的參數(shù)
        add(state, num) {
            state.count = state.count + num;
        },
        reduce(state) {
            state.count--;
        }
    };
    export default mutations;

getters 對state里面數(shù)據(jù)的一個過濾處理 對應原生的 computed 例如 當我們改變state里面的數(shù)據(jù)的時候，會監(jiān)聽這個數(shù)據(jù)的變化，返回一個新的數(shù)據(jù)

const getters = {
    countDouble(state) {
        return state.count % 2 ? "奇數(shù)" : "偶數(shù)"
    }

}
export default getters;

當我們通過mutations里面的定義的方法改變state的時候，會實時的更新這個數(shù)是奇數(shù)還是偶數(shù)

action 項目中，大多數(shù)情況都是異步的操作,怎么處理異步的操作

   addActions(context, params) {
        /**
         * context 里面的參數(shù) 
         * { dispatch commit getters state }
         * params 就是調(diào)用 addActions 里面的參數(shù) 就是這里的 addActions(100) 參數(shù)就是 100
     */
        console.log(context, params)
        fetch("https://api.myjson.com/bins/y10ma").then(data => {
            return data.json()
        }).then(data => {
            // 異步操作 add 方法就是
            context.commit("add", data.num)
        });

    },
    
    // 這個地方就是解構(gòu)賦值
    reduceActions({ commit }) {
        console.log(commit);
        commit("reduce")
    }
}

export default actions;

將所有的文件整合進入 store文件夾下面的index.js 里面

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

import state from "./store"; //全局的state倉庫
import mutations from "./mutations"; // 全局的 mutations 定義全局的事件
import getters from "./getters"; // 全局的 computed 通過監(jiān)聽 state 里面值得變化 返回需要的數(shù)據(jù)類型
import actions from "./actions" // 全局的異步操作 
const store = new Vuex.Store({
    state, // 定義狀態(tài)
    mutations,
    getters,
    actions
});

export default store;

最后一步 就是需要掛載到全局的vue上 main.js文件 

import Vue from "vue"
import App from "./App"
import router from "./router"
Vue.config.productionTip = false

import store from "./store/index";

/* eslint-disable no-new */
new Vue({
    el: "#app",
    router,
    store,
    components: { App },
    template: ""
})

如何在組件當中 調(diào)用上面的一系列的方法。

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

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

相關(guān)文章

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

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

    livem 評論0 收藏0

  • Vuex源碼閱讀筆記

    摘要：而鉆研最好的方式，就是閱讀的源代碼。整個的源代碼，核心內(nèi)容包括兩部分。逃而動手腳的代碼，就存在于源代碼的中。整個源代碼讀下來一遍，雖然有些部分不太理解，但是對和一些代碼的使用的理解又加深了一步。 筆記中的Vue與Vuex版本為1.0.21和0.6.2,需要閱讀者有使用Vue，Vuex，ES6的經(jīng)驗。 起因 俗話說得好，沒有無緣無故的愛，也沒有無緣無故的恨，更不會無緣無故的去閱讀別人的源...

    hosition 評論0 收藏0

  • Vue學習日記（四）——Vue狀態(tài)管理vuex

    摘要：說實在話，我在閱讀文檔的時候，也很難以去理解，甚至覺得沒有使用它我也可以。介紹那么到底是什么引用官網(wǎng)的說法就是是一個專為應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。 前言 先說句前話，如果不是接觸大型項目，不需要有多個子頁面，不使用vuex也是完全可以的。 說實在話，我在閱讀vuex文檔的時候，也很難以去理解v...

    fai1017 評論0 收藏0

  • Vue學習日記（四）——Vue狀態(tài)管理vuex

    摘要：說實在話，我在閱讀文檔的時候，也很難以去理解，甚至覺得沒有使用它我也可以。介紹那么到底是什么引用官網(wǎng)的說法就是是一個專為應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。 前言 先說句前話，如果不是接觸大型項目，不需要有多個子頁面，不使用vuex也是完全可以的。 說實在話，我在閱讀vuex文檔的時候，也很難以去理解v...

    zilu 評論0 收藏0

  • Vue學習日記（四）——Vue狀態(tài)管理vuex

    摘要：說實在話，我在閱讀文檔的時候，也很難以去理解，甚至覺得沒有使用它我也可以。介紹那么到底是什么引用官網(wǎng)的說法就是是一個專為應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。 前言 先說句前話，如果不是接觸大型項目，不需要有多個子頁面，不使用vuex也是完全可以的。 說實在話，我在閱讀vuex文檔的時候，也很難以去理解v...

    fjcgreat 評論0 收藏0

  • vuex入門

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

    weakish 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<