談一談Vuex

nifhlheimr 發布于2019-08-23 18:01 / 3620人閱讀

摘要：是什么官方文檔說道是一個專為應用程序開發的狀態管理模式。觸發之別名篇觸發之對象展開運算符篇觸發之對象展開運算符別名篇先引用官方文檔的說法類似于，不同在于提交的是，而不是直接變更狀態。

Vuex是什么

官方文檔說道：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化

什么是狀態管理模式

state，驅動應用的數據源；

view，以聲明方式將 state 映射到視圖；

actions，響應在 view 上的用戶輸入導致的狀態變化。

Mutation 觸發之 mapMutations 別名篇

Mutation 觸發之對象展開運算符篇

Mutation 觸發之對象展開運算符別名篇

Action

先引用官方文檔的說法

Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態。

Action 可以包含任意異步操作。

實現上是沒問題，action 調用 mutation，但關于異步要放到 action 的說法，個人觀點是沒有這個必要，在 mutation 的小結中有說到過，mutation 只做同步也不是制性的

在使用 Action 前先與 Mutation 做個小結

action 并不是必須的，項目中完全可以不需要 action

異步操作可放 mutation 和 action，只要開發時方便，都沒有影響

關于官方說 action 異步，mutation 同步的說法只是為了能用 devtools 追蹤狀態變化。

action 中的方法和 mutation 一樣，最多只有兩個形參，第一個為 context，可以理解為 store，第二個為手動傳的參數

action 用 commit() 來觸發 mutation

view 層通過 store.dispath 來分發 action

簡單使用

在 action

store.js

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

let state = {
    count: 0
}

let getters = {
    total: (state) => (symbol) => {
        return (symbol || "$") + state.count;
    }
}

let mutations = {
    increment(_state, n){
        console.log(arguments)
        _state.count += n || 1;
    },
    decrement(){
        state.count -= 1;
    }
}

let actions = {
    increment(context, n){
        context.commit("increment", n)
    }
}

const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

export default store

分發 action

mapActions

和 mutation 的使用方法基本一樣

methods: {
    ...mapActions(["increment"]),
    ...mapActions({add: "increment"})
}

Module

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

GPU云服務器云服務器談一談一次 Vuex vuex cdn

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

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

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
談一談javascript面向對象

摘要：從今天起我們開始討論的面向對象面向對象概念理解面向對象語言有個標志它們都具有類的概念，通過類可以創建任意多個具有相同屬性和方法的對象。從今天起我們開始討論javascript的面向對象面向對象概念理解面向對象語言有個標志=>它們都具有類的概念，通過類可以創建任意多個具有相同屬性和方法的對象。面向對象有三大特性封裝繼承多態但JS中對象與純面向對象語言中的對象是不同的 J...

PiscesYE 2019-08-23 14:04 評論0 收藏0
談一談javascript異步

摘要：從今天開始研究一下的異步相關內容，感興趣的請關注同期異步系列文章推薦異步中的回調異步與異步之異步之異步之和異步之一異步之二異步實戰異步總結歸檔什么是異步我們知道的單線程的，這與它的用途有關。從今天開始研究一下javascript的異步相關內容，感興趣的請關注同期異步系列文章推薦javascript異步中的回調javascript異步與promisejavascript異步之Prom...

Sourcelink 2019-08-23 14:37 評論0 收藏0