vuex筆記

LeexMuller 發(fā)布于2019-08-20 19:09 / 445人閱讀

摘要：觸發(fā)行為與相當(dāng)于。是具體改變狀態(tài)的行為，每次的可能被捕捉。而是通過發(fā)起執(zhí)行操作。因此異步行為放在。通過與具體的組件進(jìn)行綁定。但是，它規(guī)定了一些需要遵守的規(guī)則應(yīng)用層級的狀態(tài)應(yīng)該集中到單個對象中。提交是更改狀態(tài)的唯一方法，并且這個過程是同步的。

VUEX 概念

store / module

state / getters

mutations / actions

payload: commit / dispatch時的參數(shù)

context: 一個store的新實例，vuex把react中的新state的immutable處理，在框架中就處理了

commit

dispatch

plugins

strict

輔助函數(shù)：用于vuex的state與component綁定

mapState / mapGetter： compose

mapAction / mapMutations: methods

Redux

Dispatch 執(zhí)行一個 Actions, 通過一個叫做 Reducer的映射表，計算出新的 State。 Store根據(jù)新的State去更新全局組件。

Vuex

通過輔助函數(shù)將store的屬性與方法，綁定到component中。componet監(jiān)聽用戶行為。commit / dispatch 一個行為給 mutation / action。 action 內(nèi)部也是通過commit去執(zhí)行 mutation。mutation相當(dāng)于一個操作 state的列表。

// example
import Vue from "vue";
import Vuex from "vuex";

const store = new Vuex.Store({
    ...
})

new Vue({
    el: "#app",
    store,
    ...
})

store 與 component

// simpliest store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

1. 在 componet 中通過 this.$store 訪問 store。
2. store 觸發(fā)行為
    this.$store.commit("mutation name", payload);
    this.$store.dispatch("dispatch name", payload);

mutation 與 action

1. mutation 相當(dāng)于 reducer。 mutation直接在內(nèi)部改變 state。 reducer 返回一個新的state。
2. mutation 只執(zhí)行同步操作。 異步層面的操作放在 actions。 mutation是具體改變狀態(tài)的行為，每次的 mutation 可能被 plugin 捕捉。
3. actions 并不直接對 state進(jìn)行操作。而是通過發(fā)起 mutation 執(zhí)行操作。因此異步行為放在 actions。 可通過 Promise 或 async/await 去異步執(zhí)行。
4. mutation/actions 通過 mapMutations／mapActions 與具體的組件進(jìn)行綁定。

// mutationExap(state, payload) {}
// actionExamp(context, payload) {}

// example
const store = new Vuex.Store({
    state: {
        count: 0,
        name: "default name"
    },
    mutations: {
        exampleMutations1(state) {
            // do something
            state.count++
        },
        exampleMutations1(state, name) {
            
        }
    },
    actions：{
        exampleActions1(context) {
            context.commit("exampleMutations1");
        },
        exampleActions1(context) {
            // "name" is payload
            context.commit("exampleMutations1", name); 
        }
    }
});

基本規(guī)則

Vuex 并不限制你的代碼結(jié)構(gòu)。但是，它規(guī)定了一些需要遵守的規(guī)則：

應(yīng)用層級的狀態(tài)應(yīng)該集中到單個 store 對象中。

提交 mutation 是更改狀態(tài)的唯一方法，并且這個過程是同步的。

異步邏輯都應(yīng)該封裝到 action 里面。

state [type: Object]

const    store = new Vuex.Store({
    state: {
        count: 1
    }
    mutations: ...
})

modules

const moduleA = {
    state,
    mutations,
    actions, // 可無
    getters, // 可無
    modules  // 可無, 可嵌套
}

const moduleB = {
    state,
    mutations,
    actions,
    getters
    modules
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
store.state.a; // -> moduleA 的狀態(tài)
store.state.a; // -> moduleB 的狀態(tài)

getter

const store = new Vuex.Store({
    state: { ... },
    getter: {
        exampleGetter(state, getters) {
            return 
        }
    }
})

const module = {
    state: ...
    getter: {
        exampleGetter(state, getters, rootState)
    }
}

mutations [type: string]: Function

// like Reducer
const store = new Vuex.Store({
  ...
  mutations: {
    increment (state, playload) {
      // 變更狀態(tài)
      state.count++
    }
  }
})

Tips

mutation 必須是同步函數(shù)

devtools 不知道什么時候回調(diào)函數(shù)實際上被調(diào)用 —— 實質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的的狀態(tài)的改變都是不可追蹤的

actions

Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象?

支持異步：

promise

async / await

示例代碼：

function (context) {
}

context = { state, rootState, getters, commit, dispatch}

插件 plugins

https://vuex.vuejs.org/zh-cn/...

store = new vuex.Store({
    ...
    plugins: ["pluginA", "pluginB"]
    // plugins: process.env.NODE_ENV !== "production" ? 
        [myPluginWithSnapshot] : []
})

內(nèi)置的 Plugins 插件:

logger

模塊動態(tài)注冊 / 按需加載

動態(tài)加載
store.registerModule("myModule", {
  // ...
})
store.state.myModule; // myModule的狀態(tài) 

store.unregisterModule(myModule); //卸載模塊
// 不能使用此方法( unregisterModule )卸載靜態(tài)模塊（在創(chuàng)建 store 時聲明的模塊）

需要 vue 插件
例如，vuex-router-sync 插件可以集成 vue-router 與 vuex，管理動態(tài)模塊的路由狀態(tài)。

嚴(yán)格模式 / 生產(chǎn)環(huán)境／開發(fā)環(huán)境

詳見：https://vuex.vuejs.org/zh-cn/...

嚴(yán)格模式

const store = new Vuex.Store({
  // ...
  strict: true
})

環(huán)境

// 嚴(yán)格模式會對狀態(tài)進(jìn)行深度檢測，影響性能
// 因此，生產(chǎn)環(huán)境 禁用
const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== "production"
})

測試

// TODO
https://vuex.vuejs.org/zh-cn/...

Api

https://vuex.vuejs.org/zh-cn/...

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

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

發(fā)表評論

登陸后可評論

0條評論

LeexMuller

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow.example

閱讀 3265·2023-04-26 01:31
tensorflow.examples.tutorials

閱讀 1904·2023-04-25 22:08
寶塔面板Nginx通過User-Agent禁止爬蟲采集并返回炸彈

閱讀 3456·2021-09-01 11:42
這網(wǎng)站傻了嗎？這兩天老是點擊提問，就彈回主頁....什么意思

閱讀 2833·2019-08-30 12:58
前端小姿勢

閱讀 2176·2019-08-29 18:31
【css】圣杯布局

閱讀 2440·2019-08-29 17:18
React結(jié)合webpack的具體使用

閱讀 3071·2019-08-29 13:01
前端webpack workflow（二）——Webpack基本使用

閱讀 2559·2019-08-28 18:22

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vuex筆記

相關(guān)文章

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

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

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

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

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

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

發(fā)表評論

0條評論

LeexMuller

男|高級講師

TA的文章

tensorflow.example

tensorflow.examples.tutorials

寶塔面板Nginx通過User-Agent禁止爬蟲采集并返回炸彈

這網(wǎng)站傻了嗎？這兩天老是點擊提問，就彈回主頁....什么意思

前端小姿勢

【css】圣杯布局

React結(jié)合webpack的具體使用

前端webpack workflow（二）——Webpack基本使用

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vuex筆記

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！