Vuex 簡單使用

官網：https://vuex.vuejs.org/zh/

參考文章：https://www.cnblogs.com/chinabin1993/p/9848720.html

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

vuex中，有默認的五種基本的物件：

• state：存盤狀態（變數）
• getters：對資料獲取之前的再次編譯，可以理解為state的計算屬性，我們在組件中使用 $sotre.getters.fun()
• mutations：修改狀態，并且是同步的，在組件中使用$store.commit('',params)，這個和我們組件中的自定義事件類似，
• actions：異步操作，在組件中使用是$store.dispath('')
• modules：store的子模塊，為了開發大型專案，方便狀態管理而使用的，

新建專案，步驟省略

安裝vuex:

npm install vuex --save

1.state

新建一個專案，main.js中引入新建的store.js

 在store.js中

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 5
}

export default new Vuex.Store({
  state
})

　新建Index.vue，用于練習，并在路由中引入

 Index.vue

 可正常顯示

2.mutations

為了操作其中的值，可以使用mutations和actions

store.js中寫了兩個方法，操作state中的數值增加活減少

　　描述的有點復雜，官網解釋的比較清楚：https://vuex.vuejs.org/zh/guide/mutations.html

　　更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation，Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字串的 事件型別 (type) 和 一個 回呼函式 (handler)，這個回呼函式就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個引數：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 5
}

const mutations = {
  add(state, n) {
    return (state.count += n)
  },
  des(state, n) {
    return (state.count -= n)
  }
}

// const actions = {
//   actionAdd(context, n) {
//     return context.commit('add', n)
//   },
//   actionDes({commit},n) {
//     commit('des', n)
//   }
// }
export default new Vuex.Store({
  state,
  mutations,

})

Index.vue,增加兩個按鈕，做增加和減少操作

　　你不能直接呼叫一個 mutation handler，這個選項更像是事件注冊：“當觸發一個型別為 increment 的 mutation 時，呼叫此函式，”要喚醒一個 mutation handler，你需要以相應的 type 呼叫 store.commit 方法：

　　你可以向 store.commit 傳入額外的引數，即 mutation 的 載荷（payload）：

<template>
  <div>
    <div>
      <h3>{{$store.state.count}}</h3>
      <button v-on:click="myAdd(10)">add</button>
      <button v-on:click="myDes(10)">des</button>
    </div>
<!--    <div>異步操作</div>-->
<!--    <div>-->
<!--      <button @click="handleActionsAdd(10)">異步增加</button>-->
<!--      <button @click="handleActionsReduce(10)">異步減少</button>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  name: 'Index',
  methods:{
    myAdd(n){
      this.$store.commit('add',n)
    },
    myDes(n){
      this.$store.commit('des',n)
    },
    handleActionsAdd(n){
      this.$store.dispatch('actionAdd',n);
    },
    handleActionsReduce(n){
      this.$store.dispatch('actionDes',n);
    }
  }
}
</script>

<style>

</style>

點擊增加按鈕與減少按鈕均生效：

 3.Action

Action 類似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接變更狀態，
• Action 可以包含任意異步操作，

官網：https://vuex.vuejs.org/zh/guide/actions.html

store.js,Action 通過 store.dispatch 方法觸發：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 5
}

const mutations = {
  add(state, n) {
    return (state.count += n)
  },
  des(state, n) {
    return (state.count -= n)
  }
}

const actions = {
  actionAdd(context, n) {
    return context.commit('add', n)
  },
  actionDes({commit},n) {
    commit('des', n)
  }
}
export default new Vuex.Store({
  state,
  mutations,
  actions
})

Index.vue,在methods中，增加兩個方法，使用dispath來觸發

<template>
  <div>
    <div>
      <h3>{{$store.state.count}}</h3>
      <button v-on:click="myAdd(10)">add</button>
      <button v-on:click="myDes(10)">des</button>
    </div>
    <div>異步操作</div>
    <div>
      <button @click="handleActionsAdd(10)">異步增加</button>
      <button @click="handleActionsReduce(10)">異步減少</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  methods:{
    myAdd(n){
      this.$store.commit('add',n)
    },
    myDes(n){
      this.$store.commit('des',n)
    },
    handleActionsAdd(n){
      this.$store.dispatch('actionAdd',n);
    },
    handleActionsReduce(n){
      this.$store.dispatch('actionDes',n);
    }
  }
}
</script>

<style>

</style>

 4.getters

官網：https://vuex.vuejs.org/zh/guide/getters.html

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 5
}

const mutations = {
  add(state, n) {
    return (state.count += n)
  },
  des(state, n) {
    return (state.count -= n)
  }
}

const actions = {
  actionAdd(context, n) {
    return context.commit('add', n)
  },
  actionDes({commit}, n) {
    commit('des', n)
  }
}

const getters = {
  getCount(state) {
    return (state.count)
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

Index.vue,獲取getters中的方法

　　 <div>
   　　   getters--count:{{this.$store.getters.getCount}}
    </div>

簡單使用就到這里，聽說還有一個vuex官方給了我們一個更簡單的方式來使用vuex，  {mapState, mapMutations, mapActions, mapGetters}

以后再看吧

代碼：gitee

標籤：JavaScript

上一篇：第 34 題：如何實作二叉查找樹？

下一篇：列印CSDN博客內容格式腳本