1，前言

這些內容是博主在學習過程中記錄下來的，有一些不重要的點就跳過了，需要時自行查詢文檔，4.0對比3.0，區別不大。

2，State

語法有所調整

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，結合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

語法有所調整

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，結合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

語法有所調整

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，結合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

語法有所調整

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，結合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就不做贅述了，具體用法可以參考【超詳細！Vuex手把手教程】

如果看了覺得有幫助的，我是@上進的鵬多多，歡迎點贊關注評論；END

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

公眾號

往期文章

個人主頁

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 助你上手Vue3全家桶之Vue3教程助你上手Vue3全家桶之Vue-Router4教程 vue3 vuex4 vue3 + vuex4 實踐 vuex4 極速入門到上手 ⚡ vue3 全家桶體驗 Vue3 全家桶，從 0 到 1 實戰項目，新手有福了 vue 項目實戰 (vue全家桶之--- vuex) Vue3 全家桶，從 0 到 1 實戰項目 Vue全家桶系列(Vue+Vuex+Vue-Router+ElementUI)