快捷導(dǎo)航

Vue3中Vuex的詳細(xì)使用方法

更新時(shí)間：2022年07月08日 13:01:39 作者：淹死的魚u

在vue3.x中vuex調(diào)取值在html代碼里可以直接使用vue2.x的方法,但是在js里與vue2.x就有了那么一丟丟的不同,下面這篇文章主要給大家介紹了關(guān)于Vue3中Vuex詳細(xì)使用的相關(guān)資料,需要的朋友可以參考下

Vuex是做什么的？

Vue官方：狀態(tài)管理工具

狀態(tài)管理是什么?

需要在多個(gè)組件中共享的狀態(tài)、且是響應(yīng)式的、一個(gè)變，全都改變。

例如一些全局要用的的狀態(tài)信息：用戶登錄狀態(tài)、用戶名稱、地理位置信息、購物車中商品、等等

這時(shí)候我們就需要這么一個(gè)工具來進(jìn)行全局的狀態(tài)管理，Vuex就是這樣的一個(gè)工具。

單頁面的狀態(tài)管理

View–>Actions—>State

視圖層(view)觸發(fā)操作(action)更改狀態(tài)(state)響應(yīng)回視圖層(view)

vuex（Vue3.2版本）

store/index.js 創(chuàng)建store對(duì)象并導(dǎo)出store

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

main.js 引入并使用

...
import store from './store'
...
app.use(store)

多頁狀態(tài)管理

vuex store對(duì)象屬性介紹

Vue3中獲取 store 實(shí)例對(duì)象的方法

vue2 中可以通過 this.$store.xxx 的方式拿到 store 的實(shí)例對(duì)象。

vue3 中的 setup 在 beforecreate 和 created 前執(zhí)行，此時(shí) vue對(duì)象還未被創(chuàng)建，沒有了之前的this，所以此處我們需要用到另一種方法來獲取到 store 對(duì)象。

import { useStore } from 'vuex' // 引入useStore 方法
const store = useStore()  // 該方法用于返回store 實(shí)例
console.log(store)  // store 實(shí)例對(duì)象

1. state

存放數(shù)據(jù)的地方

state: {
  count: 100,
  num: 10
},

使用：使用方法大致與vue2.x中的版本相同，通過 $store.state.屬性名來獲取state中的屬性。

//template中
<span>{{$store.state.count}}</span>
<span>{{$store.state.num}}</span>

可以在 state 中直接進(jìn)行數(shù)據(jù)變化的操作，但Vue不建議這么做。因?yàn)閷?duì)于vue開發(fā)工具 devtools 來說，直接在state中進(jìn)行數(shù)據(jù)改變，devtools是跟蹤不到的。vuex中希望通過 action（進(jìn)行異步操作）或是 mutations（同步操作）來進(jìn)行數(shù)據(jù)改變的操作，這樣在 devtools 中才能直接觀察出數(shù)據(jù)的變化以及記錄，方便開發(fā)者調(diào)試。

另外，在vue3 中對(duì)state 中對(duì)象新增屬性或刪除時(shí)，不再需要通過 vue.set() , 或是 vue.delete() 來進(jìn)行對(duì)象的響應(yīng)式處理了，直接新增的對(duì)象屬性已經(jīng)具有響應(yīng)式。

2. mutations

vuex的store狀態(tài)更新的唯一方式：提交 mutation

同步操作可以直接在mutatuions中直接進(jìn)行

mutions 主要包含2部分:

字符串的事件類型 (type)
一個(gè)**回調(diào)函數(shù)（handler）**該回調(diào)函數(shù)的第一個(gè)參數(shù)是 state

mutations: {
  // 傳入 state
  increment (state) {
    state.count++
  }
}

template 中通過 $store.commit('方法名') 觸發(fā)

在 vue3.x 中需要拿到** store 實(shí)例的話，需要調(diào)用 useStore **這樣一個(gè)函數(shù)，在 vuex 中導(dǎo)入

// 導(dǎo)入 useStore 函數(shù)
import { useStore } from 'vuex'
const store = useStore()
store.commit('increment')

mution 的參數(shù)與傳參方法

mution 接收參數(shù)直接寫在定義的方法里邊即可接受傳遞的參數(shù)

// ...state定義count
mutations: {
  sum (state, num) {
    state.count += num
  }
}

通過 commit 的payload 進(jìn)行參數(shù)傳遞

使用 store.commit('mution中函數(shù)名', '需要傳遞的參數(shù)' ) 在commit里添加參數(shù)的方式進(jìn)行傳遞

<h2>{{this.$store.state.count}}</h2>
<button @click="add(10)">++</button>
...
<script setup>
// 獲取store實(shí)例，獲取方式看上邊獲取store實(shí)例方法
const add = (num) => {
  store.commit('sum', num)
}
</script>

mution 的提交風(fēng)格

前面提到了 mution 主要包含 type 和回調(diào)函數(shù) 兩部分, 和通過commit payload的方式進(jìn)行參數(shù)傳遞（提交）,下面我們可以

用這種方式進(jìn)行 mution 的提交

const add = (num) => {
? store.commit({
? ? type: 'sum', ?// 類型就是mution中定義的方法名稱
? ? num
? })
}

...
mutations: {
? sum (state, payload) {
? ? state.count += payload.num
? }
}

3. actions

異步操作在action中進(jìn)行，再傳遞到mutation

action基本使用如下：

action 中定義的方法默認(rèn)參數(shù)為** context 上下文**，可以理解為 store 對(duì)象

通過 context 上下文對(duì)象，拿到store，通過 commit 觸發(fā) mution 中的方法，以此來完成異步操作

...
mutations: {
  sum (state, num) {
    state.count += num
  }
},
actions: {
  // context 上下文對(duì)象，可以理解為store
  sum_actions (context, num) {
    setTimeout(() => {
      context.commit('sum', num)  // 通過context去觸發(fā)mutions中的sum
    }, 1000)
  }
},

在template 中通過dispatch 調(diào)用action 中定義的sum_action 方法

// ...template
store.dispatch('sum_actions', num)

通過 promise 實(shí)現(xiàn)異步操作完成，通知組件異步執(zhí)行成功或是失敗。

// ...
const addAction = (num) => {
  store.dispatch('sum_actions', {
    num
  }).then((res) => {
    console.log(res)
  }).catch((err) => {
    console.log(err)
  })
}

sun_action方法返回一個(gè)promise，當(dāng)累加的值大于30時(shí)不再累加，拋出錯(cuò)誤。

 actions: {
    sum_actions (context, payload) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 通過 context 上下文對(duì)象拿到 count
          if (context.state.count < 30) {
            context.commit('sum', payload.num)
            resolve('異步操作執(zhí)行成功')
          } else {
            reject(new Error('異步操作執(zhí)行錯(cuò)誤'))
          }
        }, 1000)
      })
    }
  },

4. getters

類似于組件的計(jì)算屬性

import { createStore } from 'vuex'

export default createStore({
  state: {
    students: [{ name: 'mjy', age: '18'}, { name: 'cjy', age: '22'}, { name: 'ajy', age: '21'}]
  },
  getters: {
    more20stu (state) { return state.students.filter(item => item.age >= 20)}
  }
})

使用通過$store.getters.方法名進(jìn)行調(diào)用

//...template
<h2>{{$store.getters.more20stu}}</h2> // 展示出小于20歲的學(xué)生

getters 的入?yún)? getters 可以接收兩個(gè)參數(shù)，一個(gè)是 state, 一個(gè)是自身的 getters ，并對(duì)自身存在的方法進(jìn)行調(diào)用。

getters: {
  more20stu (state, getters) { return getters.more20stu.length}
}

getters 的參數(shù)與傳參方法

上面是getters固定的兩個(gè)參數(shù)，如果你想給getters傳遞參數(shù)，讓其篩選大于 age 的人，可以這么做

返回一個(gè) function 該 function 接受 Age，并處理

getters: {
  more20stu (state, getters) { return getters.more20stu.length},
  moreAgestu (state) {
      return function (Age) {
        return state.students.filter(item =>
          item.age >= Age
        )
      }
    }
  // 該寫法與上邊寫法相同但更簡(jiǎn)潔，用到了ES6中的箭頭函數(shù)，如想了解es6箭頭函數(shù)的寫法
  // 可以看這篇文章 https://blog.csdn.net/qq_45934504/article/details/123405813?spm=1001.2014.3001.5501
  moreAgestu_Es6: state => {
    return Age => {
      return state.students.filter(item => item.age >= Age)
    }
  }
}

使用

//...template
<h2>{{$store.getters.more20stu}}</h2> // 展示出小于20歲的學(xué)生
<h2>{{$store.getters.moreAgestu(18)}}</h2> // 通過參數(shù)傳遞, 展示出年齡小于18的學(xué)生

5. modules

當(dāng)應(yīng)用變得復(fù)雜時(shí)，state中管理的變量變多，store對(duì)象就有可能變得相當(dāng)臃腫。

為了解決這個(gè)問題，vuex允許我們將store分割成模塊化（modules），而每個(gè)模塊擁有著自己的state、mutation、action、getters等

在store文件中新建modules文件夾

在modules中可以創(chuàng)建單一的模塊，一個(gè)模塊處理一個(gè)模塊的功能

store/modules/user.js 處理用戶相關(guān)功能

store/modules/pay.js 處理支付相關(guān)功能

store/modules/cat.js 處理購物車相關(guān)功能

// user.js模塊
// 導(dǎo)出
export default {
  namespaced: true, // 為每個(gè)模塊添加一個(gè)前綴名，保證模塊命明不沖突 
  state: () => {},
  mutations: {},
  actions: {}
}

最終通過 store/index.js 中進(jìn)行引入

// store/index.js
import { createStore } from 'vuex'
import user from './modules/user.js'
import user from './modules/pay.js'
import user from './modules/cat.js'
export default createStore({
  modules: {
    user,
    pay,
    cat
  }
})

在template中模塊中的寫法和無模塊的寫法大同小異，帶上模塊的名稱即可

<h2>{{$store.state.user.count}}</h2>

store.commit('user/sum', num) // 參數(shù)帶上模塊名稱
store.dispatch('user/sum_actions', sum)

總結(jié)

到此這篇關(guān)于Vue3中Vuex詳細(xì)使用的文章就介紹到這了,更多相關(guān)Vue3中Vuex使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue3
vuex

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具