Vue3中vuex的基本使用方法實例
一、基本結(jié)構(gòu)
src/store/index.js中,代碼如下
// vue3中創(chuàng)建store實例對象的方法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ài) updateInfo (context, payload) { setTimeout(() => { context.commit('updateInfo', payload) }, 2000) } }, getters: { // 定義一個getters formatInfo (state) { return state.info + ' Tom' } }, modules: { } })
src/views/Test.vue測試組件中對store中數(shù)據(jù)的操作與使用
<template> <div>測試組件</div> <hr> <!-- 頁面中直接使用渲染時與vue2中的使用方法相同 --> <div>獲取Store中的state、getters: {{$store.getters.formatInfo}}</div> <button @click='handleClick'>點擊</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對象,相當(dāng)于src/store/index.js中的store實例對象 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>
點擊按鈕前
點擊按鈕后
三、將store中的數(shù)據(jù)模塊化后的使用
1.模塊化
基于原index.js代碼進(jìn)行改造拆分,假設(shè)有兩個模塊global和user,新建src/store/modules/global.js 、src/store/modules/user.js文件
拆分后代碼如下(src/store/modules/global.js)
// 全局store,存放全局使用共享的數(shù)據(jù) export default { // 注意:全局模塊中不需要開啟命名空間 state: { }, mutations: { }, actions: { }, getters: { } }
拆分后代碼如下(src/store/modules/user.js)
// 用戶信息模塊(局部模塊) export default { namespaced: true, // 開啟命名空間 state () { return { // 用戶信息對象 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ài) updateNickname (context, payload) { setTimeout(() => { context.commit('updateNickname', payload) }, 2000) } }, getters: { // 定義一個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測試組件中對模塊化后的store中數(shù)據(jù)的操作與使用
<template> <div>測試組件</div> <hr> <div>獲取Store中user模塊的getters: {{$store.getters['user/formatNickname']}}</div> <button @click='handleClick'>點擊</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>
點擊按鈕前
點擊按鈕后
補(bǔ)充:如何改變vuex中的屬性
vue3和vue2一樣,都是通過提交mutations中的方法,進(jìn)行對vuex中數(shù)據(jù)的改變,那具體該如何使用呢?首先看一下mutations中的寫法
const mutations = { addCount(state, payload) { state.count += payload }, } export { mutations }
這里,定義了一個addCount方法,這個方法接受兩個參數(shù),第一個參數(shù)是要改變的state對象(當(dāng)然你調(diào)用這個放法的傳參中也可以寫state.count,然后再mutations中直接state += payload就可以了),第二個參數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2.0實現(xiàn)點擊其他區(qū)域關(guān)閉自定義div功能
這篇文章主要介紹了vue2.0實現(xiàn)點擊其他區(qū)域關(guān)閉自定義div功能實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟
這篇文章主要給大家介紹了關(guān)于vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實例
這篇文章主要介紹了ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10