Vue3中vuex的基本使用方法實(shí)例
一、基本結(jié)構(gòu)
src/store/index.js中,代碼如下
// vue3中創(chuàng)建store實(shí)例對(duì)象的方法createStore()按需引入 import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, getters: { }, modules: { } })
二、基本使用
src/store/index.js
import { createStore } from 'vuex' export default createStore({ state: { info: 'hello' }, mutations: { // 定義mutations,用于修改狀態(tài)(同步) updateInfo (state, payload) { state.info = payload } }, actions: { // 定義actions,用于修改狀態(tài)(異步) // 2秒后更新?tīng)顟B(tài) updateInfo (context, payload) { setTimeout(() => { context.commit('updateInfo', payload) }, 2000) } }, getters: { // 定義一個(gè)getters formatInfo (state) { return state.info + ' Tom' } }, modules: { } })
src/views/Test.vue測(cè)試組件中對(duì)store中數(shù)據(jù)的操作與使用
<template> <div>測(cè)試組件</div> <hr> <!-- 頁(yè)面中直接使用渲染時(shí)與vue2中的使用方法相同 --> <div>獲取Store中的state、getters: {{$store.getters.formatInfo}}</div> <button @click='handleClick'>點(diǎn)擊</button> </template> <script> // 按需引入useStore()方法 import { useStore } from 'vuex' export default { name: 'Test', setup () { // this.$store.state.info // Vue3中store類似于Vue2中this.$store // useStore()方法創(chuàng)建store對(duì)象,相當(dāng)于src/store/index.js中的store實(shí)例對(duì)象 const store = useStore() console.log(store.state.info) // hello // 修改info的值 const handleClick = () => { // 觸發(fā)mutations,用于同步修改state的信息 // store.commit('updateInfo', 'nihao') // 觸發(fā)actions,用于異步修改state的信息 store.dispatch('updateInfo', 'hi') } return { handleClick } } } </script>
點(diǎn)擊按鈕前
點(diǎn)擊按鈕后
三、將store中的數(shù)據(jù)模塊化后的使用
1.模塊化
基于原index.js代碼進(jìn)行改造拆分,假設(shè)有兩個(gè)模塊global和user,新建src/store/modules/global.js 、src/store/modules/user.js文件
拆分后代碼如下(src/store/modules/global.js)
// 全局store,存放全局使用共享的數(shù)據(jù) export default { // 注意:全局模塊中不需要開(kāi)啟命名空間 state: { }, mutations: { }, actions: { }, getters: { } }
拆分后代碼如下(src/store/modules/user.js)
// 用戶信息模塊(局部模塊) export default { namespaced: true, // 開(kāi)啟命名空間 state () { return { // 用戶信息對(duì)象 profile: { id: '', avatar: '', nickname: 'yee', account: '', mobile: '', token: '' } } }, mutations: { // 定義mutations,用于同步修改狀態(tài) updateNickname (state, payload) { state.profile.nickname = payload } }, actions: { // 定義actions,用于異步修改狀態(tài) // 2秒后更新?tīng)顟B(tài) updateNickname (context, payload) { setTimeout(() => { context.commit('updateNickname', payload) }, 2000) } }, getters: { // 定義一個(gè)getters formatNickname (state) { return 'Hi ' + state.profile.nickname } } }
拆分后代碼如下(src/store/index.js)
import { createStore } from 'vuex' // 全局模塊 import global from './modules/global' // 局部模塊 import user from './modules/user' export default createStore({ // 全局模塊 ...global, // 局部模塊 modules: { user } })
2.使用
src/views/Test.vue測(cè)試組件中對(duì)模塊化后的store中數(shù)據(jù)的操作與使用
<template> <div>測(cè)試組件</div> <hr> <div>獲取Store中user模塊的getters: {{$store.getters['user/formatNickname']}}</div> <button @click='handleClick'>點(diǎn)擊</button> </template> <script> import { useStore } from 'vuex' export default { name: 'Test', setup () { // this.$store.state.info // Vue3中store類似于Vue2中this.$store const store = useStore() console.log(store.state.user.profile.nickname) // 修改nickname的值 const handleClick = () => { // 觸發(fā)mutations,用于同步修改user模塊state的信息 // store.commit('updateNickname', 'Jackson') store.dispatch('user/updateNickname', 'Yee') } return { handleClick } } } </script>
點(diǎn)擊按鈕前
點(diǎn)擊按鈕后
補(bǔ)充:如何改變vuex中的屬性
vue3和vue2一樣,都是通過(guò)提交mutations中的方法,進(jìn)行對(duì)vuex中數(shù)據(jù)的改變,那具體該如何使用呢?首先看一下mutations中的寫(xiě)法
const mutations = { addCount(state, payload) { state.count += payload }, } export { mutations }
這里,定義了一個(gè)addCount方法,這個(gè)方法接受兩個(gè)參數(shù),第一個(gè)參數(shù)是要改變的state對(duì)象(當(dāng)然你調(diào)用這個(gè)放法的傳參中也可以寫(xiě)state.count,然后再mutations中直接state += payload就可以了),第二個(gè)參數(shù)是要改變的數(shù)據(jù),比如進(jìn)行 +1 操作
<template> <h1>vuex中的數(shù)據(jù){{ store.state.count }}</h1> <button @click="changeStoreCount">改變vuex數(shù)據(jù)</button> </template> <script lang="ts"> import { defineComponent } from "vue" import { useStore } from "vuex" export default defineComponent({ name: "index", setup() { const store = useStore() console.log(store) const changeStoreCount = () => { // 在這里提交了mutations中的addCount方法 store.commit("addCount", 1) } return { store, changeStoreCount } }, }) </script> <style scoped></style>
總結(jié)
到此這篇關(guān)于Vue3中vuex的基本使用方法的文章就介紹到這了,更多相關(guān)Vue3 vuex基本使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
element-ui封裝一個(gè)Table模板組件的示例
這篇文章主要介紹了element-ui封裝一個(gè)Table模板組件的示例,幫助大家更好的理解和學(xué)習(xí)vue框架的使用,感興趣的朋友可以了解下2021-01-01vue2.0實(shí)現(xiàn)點(diǎn)擊其他區(qū)域關(guān)閉自定義div功能
這篇文章主要介紹了vue2.0實(shí)現(xiàn)點(diǎn)擊其他區(qū)域關(guān)閉自定義div功能實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟
這篇文章主要給大家介紹了關(guān)于vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10VUE axios發(fā)送跨域請(qǐng)求需要注意的問(wèn)題
本篇文章主要介紹了VUE axios發(fā)送跨域請(qǐng)求需要注意的問(wèn)題,在實(shí)際項(xiàng)目中前端使用到vue,后端使用php進(jìn)行開(kāi)發(fā)。前端使用axios請(qǐng)求請(qǐng)求遇到的問(wèn)題,有興趣的可以了解一下2017-07-07ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實(shí)例
這篇文章主要介紹了ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10vue3+typeScript穿梭框的實(shí)現(xiàn)示例
這篇文章主要介紹了vue3+typeScript穿梭框的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12解決vue多個(gè)路由共用一個(gè)頁(yè)面的問(wèn)題
下面小編就為大家分享一篇解決vue多個(gè)路由共用一個(gè)頁(yè)面的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03