Vue3中使用vuex4的實現(xiàn)示例
更新時間：2022年06月22日 09:30:55 作者：龍雨LongYu12
本文主要介紹了Vue3中使用vuex4的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
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)文章
這篇文章介紹了vue實現(xiàn)消息無縫滾動效果的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了vue2.0實現(xiàn)音樂和視頻播放進度條組件的思路及具體實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要介紹了在antd Table中插入可編輯的單元格實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue實現(xiàn)商品詳情頁的評價列表功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue解決跨域問題，本文通過實例圖文相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
Vue項目中對index.html中BASE_URL的配置方式
這篇文章主要介紹了Vue項目中對index.html中BASE_URL的配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue中使用echarts刷新可以正常渲染但路由跳轉(zhuǎn)不顯示的問題解決
在?Vue?中使用?ECharts?組件時,遇到路由跳轉(zhuǎn)后圖表不顯示的問題可能是因為組件銷毀和重新創(chuàng)建的原因,所以本文給大家介紹了vue中使用echarts刷新可以正常渲染但路由跳轉(zhuǎn)不顯示問題的解決方法,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue CLI3搭建的項目中路徑相關(guān)問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在開發(fā)中經(jīng)常有從列表跳到詳情頁，然后返回詳情頁的時候需要緩存列表頁的狀態(tài)（比如滾動位置信息），這個時候就需要保存狀態(tài)，要緩存狀態(tài)2021-10-10
這篇文章主要介紹了Vue中的table表單切換實現(xiàn)效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08