1秋冰，前言
這些內(nèi)容是博主在學(xué)習(xí)過程中記錄下來的，有一些不重要的點(diǎn)就跳過了插佛，需要時(shí)自行查詢文檔杠巡，4.0對(duì)比3.0，區(qū)別不大雇寇。
2氢拥，State
語法有所調(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
語法有所調(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
語法有所調(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
語法有所調(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：在本頁按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è)人主頁
