成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vuex 使用

Hanks10100 / 2324人閱讀

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

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

store.js 存儲(chǔ)全局的狀態(tài)數(shù)據(jù)，在整個(gè)vue的所有組件里面都可以訪問 對(duì)應(yīng)原生的 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 對(duì)state里面數(shù)據(jù)的一個(gè)過濾處理 對(duì)應(yīng)原生的 computed 例如 當(dāng)我們改變state里面的數(shù)據(jù)的時(shí)候，會(huì)監(jiān)聽這個(gè)數(shù)據(jù)的變化，返回一個(gè)新的數(shù)據(jù)

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

}
export default getters;

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

action 項(xiàng)目中，大多數(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è)地方就是解構(gòu)賦值
    reduceActions({ commit }) {
        console.log(commit);
        commit("reduce")
    }
}

export default actions;

將所有的文件整合進(jìn)入 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: ""
})

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

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

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

相關(guān)文章

  • Vuex源碼學(xué)習(xí)（一）功能梳理

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

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

  • Vuex源碼閱讀筆記

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

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

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

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

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

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

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

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

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

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

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

  • vuex入門

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

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

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

0條評(píng)論

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