1，前言

這些內(nèi)容是博主在學(xué)習(xí)過程中記錄下來(lái)的，有一些不重要的點(diǎn)就跳過了，需要時(shí)自行查詢文檔，4.0對(duì)比3.0，區(qū)別不大。

VueX4.0官網(wǎng)

2，State

語(yǔ)法有所調(diào)整

2.1，直接使用

import { onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
    name: 'Home',
    setup() {
        const Store = useStore()
        onMounted(() => {
            console.log(Store.state.author)
        })
    }
}

2.2，結(jié)合computed

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
    name: 'Home',
    setup() {
        const Store = useStore()
        return {
      count: computed(() => Store.state.author)
    }
    }
}

3，Getter

語(yǔ)法有所調(diào)整

3.1，直接使用

import { onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
    name: 'Home',
    setup() {
        const Store = useStore()
        onMounted(() => {
            console.log(Store.getters.getCookie)
            console.log(Store.getters.getToken('Param'))
        })
    }
}

3.2，結(jié)合computed

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
    name: 'Home',
    setup() {
        const Store = useStore()
        return {
            count1: computed(() => Store.getters.getCookie),
            count2: computed(() => Store.getters.getToken('param'))
        }
    }
}

4，Mutation

語(yǔ)法有所調(diào)整

4.1，直接使用

<p @click="set">{{ cookie }}</p>

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
    name: 'Home',
    setup() {
        const Store = useStore()
        const set = function() {
            Store.commit('setCookie', 'param')
        }
        return {
            set,
            cookie: computed(() => Store.state.cookie)
        }
    }
}

4.2，結(jié)合computed

<p @click="set">{{ cookie }}</p>

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
    name: 'Home',
    setup() {
        const Store = useStore()
        return {
            cookie: computed(() => Store.state.cookie),
            set: () => Store.commit('setCookie', 'param')
        }
    }
}

5，Action

語(yǔ)法有所調(diào)整

5.1，直接使用

<p @click="set">{{ cookie }}</p>

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
    name: 'Home',
    setup() {
        const Store = useStore()
        const set = function() {
            Store.dispatch('set', 'param')
        }
        return {
            cookie: computed(() => Store.state.cookie),
            set
        }
    }
}

5.2，結(jié)合computed

<p @click="set">{{ cookie }}</p>

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
    name: 'Home',
    setup() {
        const Store = useStore()
        return {
            cookie: computed(() => Store.state.cookie),
            set: () => Store.dispatch('set', 'param')
        }
    }
}

后記：Modules就不做贅述了，具體用法可以參考【超詳細(xì)！Vuex手把手教程】

如果看了覺得有幫助的，我是@鵬多多11997110103，歡迎 點(diǎn)贊 關(guān)注 評(píng)論；
END

PS：在本頁(yè)按F12，在console中輸入document.querySelectorAll('._2VdqdF')[0].click()，有驚喜哦

往期文章

• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超詳細(xì)！Vuex手把手教程
• 使用nvm管理node.js版本以及更換npm淘寶鏡像源
• 超詳細(xì)！Vue-Router手把手教程
• vue中利用.env文件存儲(chǔ)全局環(huán)境變量，以及配置vue啟動(dòng)和打包命令
• 微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮

個(gè)人主頁(yè)

• CSDN
• GitHub
• 簡(jiǎn)書
• 博客園
• 掘金