Vuex

SimonMa 發布于2019-08-23 17:21 / 1755人閱讀

摘要：是什么是一個針對開發的狀態管理模式。說簡單點兒就是一個工具，可以管理修改或設置所有組件用到的數據，而不需要借助之前的或者在組件間傳值。

Vuex是什么

Vuex是一個針對Vue.js開發的狀態管理模式。說簡單點兒就是一個工具，可以管理（修改或設置）所有組件用到的數據，而不需要借助之前的event bus或者props在組件間傳值。

Vuex使用場景

大型單頁應用程序，存在多組件共享數據的時候，需要用到
Vuex 核心內容

store

(一個容器對象，存儲Vuex中的state,mutations,actions,getters等)

state (一個保存數據的對象，對象中的數據可以供所有組件使用)

// 1. 定義
const state = {
count: 0
}

// 2. 獲取state中的值
this.$store.state.count

// mapState 輔助函數獲取多個state的值
import { mapState } from "vuex"
computed: mapState({

// 箭頭函數可使代碼更簡練
count: state => state.count,
// 傳字符串參數 "count" 等同于 `state => state.count`
countAlias: "count",

})
computed: mapState([
// 映射 this.count 為 store.state.count
"count"
])

// 3. 與組件的計算屬性混合使用
computed: {
localComputed () { / ... / },
// 使用對象展開運算符將此對象混入到外部對象中
...mapState({

// ...

})
}

mutations

(一個對象，保存的是更改state的函數，也只有它能更改state中的值，觸發方式this.$store.commit("函數名",參數))

// 1. 定義
const mutations = {
  increment (state) {
    state.count++
  }
}

// 2. 觸發
this.$store.commit("increment")

// 3. 傳遞參數，通常參數應該是一個對象
mutations: {
  increment (state, n) {
    state.count += n
  }
}
this.$store.commit("increment", 10)

// 4. 在組件的方法中使用
  methods: {
    ...mapMutations([
      "increment", // 將 `this.increment()` 映射為 `this.$store.commit("increment")`

      // `mapMutations` 也支持載荷：
      "incrementBy" // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit("incrementBy", amount)`
    ]),
    ...mapMutations({
      add: "increment" // 將 `this.add()` 映射為 `this.$store.commit("increment")`
    })
  }

actions

(一個對象，保存的是觸發mutations的函數，讓mutations去修改state中的值)

// 1. 定義
const actions = {
  increment: ({ commit }) => commit("increment")
}

// 2. 觸發
this.$store.dispatch("increment")

// 3. 參數支持
this.$store.dispatch("incrementAsync", {
  amount: 10
})

// 4. 組件的方法中使用
  methods: {
    ...mapActions([
      "increment", // 將 `this.increment()` 映射為 `this.$store.dispatch("increment")`

      // `mapActions` 也支持載荷：
      "incrementBy" // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch("incrementBy", amount)`
    ]),
    ...mapActions({
      add: "increment" // 將 `this.add()` 映射為 `this.$store.dispatch("increment")`
    })
  }

getters

(一個對象，保存的是一些類似與計算屬性的函數，可以通過他們得到任何依賴于state的新的數據)

// 1. 定義
const getters = {
  evenOrOdd: state => state.count % 2 === 0 ? "even" : "odd"
}

// 2. 使用
this.$store.getters.evenOrOdd

// 3. 使用其他getters作為參數
getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

// 4. 組件內使用
export default {
  // ...
  computed: {
  // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
      "doneTodosCount",
      "anotherGetter",
      // ...
    ])
  }
}

使用vuex

npm install vuex -S

// store.js
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

// app.js
import store from "./store"

new Vue({
  el: "#app",
  store,
  render: h => h(Counter)
})

GPU云服務器云服務器 Vuex vuex cdn Vue_Vuex

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

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

Vuex源碼閱讀筆記

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

hosition 2019-08-21 13:44 評論0 收藏0
Vuex源碼學習（一）功能梳理

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

livem 2019-08-23 16:11 評論0 收藏0
Vue學習日記（四）——Vue狀態管理vuex

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

fai1017 2019-08-30 13:53 評論0 收藏0
Vue學習日記（四）——Vue狀態管理vuex

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

zilu 2019-08-26 11:35 評論0 收藏0
Vue學習日記（四）——Vue狀態管理vuex

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

fjcgreat 2019-08-01 18:30 評論0 收藏0
vuex入門

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

weakish 2019-08-23 16:56 評論0 收藏0