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手把手教程】
如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎 点赞 关注 评论；
END
PS：在本页按F12，在console中输入document.querySelectorAll('._2VdqdF')[0].click()，有惊喜哦
往期文章
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之Vue-Router4教程
- 超详细！Vuex手把手教程
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- 超详细！Vue-Router手把手教程
- vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
- 微信小程序实现搜索关键词高亮
个人主页
