Vue3中使用vuex4的實現(xiàn)示例
更新時間：2022年06月22日 09:30:55 作者：龍雨LongYu12
本文主要介紹了Vue3中使用vuex4的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
1、引入依賴：
npm i vuex
2、新建文件夾 store ，在里面新建文件 index.js
3、index.js文件內(nèi)容：
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})4、在 main.js 中引入
import store from './store'
5、使用
在 store/index.js 的 state 中添加 count: 0
在任一組件文件中：加入下面代碼：
import { useStore } from "vuex";
export default {
name: "App",
setup() {
// Vue3 有個 composition api 的入口
const store = useStore();// 獲取容器
},
};
獲取到容器 store 后 ，獲取 Vuex 中的 count 的值，通過 store.state.count 來獲取。
直接在 template 中使用，目前可以使用舊版本寫法
如果想要字段 count 改變后，頁面顯示數(shù)據(jù)也改變，需要引入 vue 的計算屬性 computed
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<h1>Vuex</h1>
<h1>{{ count }}</h1>
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
name: "App",
setup() {
// Vue3 有個 composition api 的入口
const store = useStore(); // 獲取容器
// 獲取 Vuex 中的 count 的值
console.log("store.state.count", store.state.count);
return {
count: computed(() => store.state.count),
};
},
};
</script>
6、修改 count 的值
這個和在 vue2 中的寫法一樣
在 store/index.js 中添加下面代碼：
mutations: {
add(state, payload) {
state.count += payload
}
},在 要修改 count 的值的組件中通過 commit 來修改
store.commit('add', 3)
到此這篇關(guān)于Vue3中使用vuex4的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)Vue3使用vuex4內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了mint-ui如何自定義messageBox樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
v-for循環(huán)中使用require/import關(guān)鍵字引入本地圖片的幾種方式
在做項目的過程中,模版相同,可是不標題和圖片不同,循環(huán)標題我們知道可以用v-for循環(huán),可是該怎么引入本地圖片呢？下面這篇文章主要給大家介紹了v-for循環(huán)中使用require/import關(guān)鍵字引入本地圖片的幾種方式,需要的朋友可以參考下2021-09-09
在本篇文章里小編給大家整理的是關(guān)于Vue組件通信中非父子組件傳值知識點總結(jié)，有興趣的朋友們學習下。2019-12-12
使用vuetify實現(xiàn)全局v-alert消息通知的方法
使用強大的Vuetify開發(fā)前端頁面,結(jié)果發(fā)現(xiàn)官方?jīng)]有提供簡便的全局消息通知組件,所以自己動手寫了一個簡單的組件,接下來通過本文給大家介紹使用vuetify實現(xiàn)全局v-alert消息通知的詳細代碼,感興趣的朋友跟隨小編一起看看吧2024-02-02
在vue中如果把所有的代碼都寫到一個頁面中,有時比較難找,顯得比較復雜,下面這篇文章主要給大家介紹了關(guān)于VUE項目中引入JS文件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
實現(xiàn)Vue的markdown文檔可以在線運行的方法示例
這篇文章主要介紹了實現(xiàn)Vue的markdown文檔可以在線運行的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue?全部生命周期組件梳理整理，在創(chuàng)建組件之前使用；在實例初始化之后,進行數(shù)據(jù)偵聽和事件，偵聽器的配置之前同步調(diào)用2022-06-06
在前后端的開發(fā)中總是難免會遇到前后端的跨域問題,下面這篇文章主要給大家介紹了關(guān)于vue2中vue.config.js簡單配置代理跨域的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
為了給Vue一個提示,以便它能跟蹤每個節(jié)點的身份,從而重用和重新排序現(xiàn)有元素,你需要為每項提供一個唯一key屬性,下面這篇文章主要給大家介紹了關(guān)于Vue深入理解之v-for中key的真正作用,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue-jsonp的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12