快捷導(dǎo)航

Vue3中使用vuex4的實(shí)現(xiàn)示例

更新時(shí)間：2022年06月22日 09:30:55 作者：龍雨LongYu12

本文主要介紹了Vue3中使用vuex4的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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 有個(gè) composition api 的入口
    const store = useStore();// 獲取容器
    
  },
};

獲取到容器 store 后，獲取 Vuex 中的 count 的值，通過(guò) store.state.count 來(lái)獲取。

直接在 template 中使用，目前可以使用舊版本寫法

如果想要字段 count 改變后，頁(yè)面顯示數(shù)據(jù)也改變，需要引入 vue 的計(jì)算屬性 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 有個(gè) composition api 的入口
    const store = useStore(); // 獲取容器
    // 獲取 Vuex 中的 count 的值
    console.log("store.state.count", store.state.count);
    return {
      count: computed(() => store.state.count),
    };
  },
};
</script>

6、修改 count 的值

這個(gè)和在 vue2 中的寫法一樣

在 store/index.js 中添加下面代碼：

 mutations: { 
    add(state, payload) {
      state.count += payload
    }
  },

在要修改 count 的值的組件中通過(guò) commit 來(lái)修改

store.commit('add', 3)

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

您可能感興趣的文章:

Vue3
vuex4

相關(guān)文章

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