vuex4 极速入门到上手
2023-03-20 15:37:14 时间
vuex4 是 vue3的兼容版本,提供了和vuex3 的相同API。因此我们可以在 vue3 中复用之前已存在的 vuex 代码。
一、安装以及初始化
vuex4安装:
npm install vuex@next
为了向vue3初始化方式看齐,vuex4 初始化方式做了相应的变化,使用新的 createStore 函数创建新的 store 实例。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createStore } from "vuex"
const store = createStore({
state(){
return{
num:1,
}
}
})
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
//在组件内使用时与之前一样
<div>{{$store.state.num}}</div>
二、vuex4在组件内的使用
2.1、使用场景1
在组件的模板中直接使用,与之前的api保持一致
// 在 main.js 内
const store = createStore({
state(){
return{
num:1,
}
},
mutations:{
addNum(state){
state.num++
}
},
actions:{},
modules:{}
})
//组件内
<div>
{{$store.state.num}}
<button @click="$store.commit('addNum')">num自加</button>
</div>
2.2、使用场景2
通过 useStore 把store 引入组件内,然后操作 store 。
<template>
<div>
store组件
{{state.num}}
<button @click="add">num自加</button>
</div>
</template>
<script>
import { useStore } from "vuex"
export default {
setup(){
const store = useStore()
return{
state:store.state,
add(){
store.commit('addNum')
}
}
}
}
</script>
2.3、使用场景3
store 内使用到多个值时,可以通过 toRefs 方法,将 store.state 内的数据直接展开。
<template>
<div>
{{num}}
<button @click="add">num自加</button>
</div>
</template>
<script>
import { useStore } from 'vuex'
import { toRefs } from "vue"
export default {
setup(){
const store = useStore()
return{
...toRefs(store.state),
add(){
store.commit('addNum')
}
}
}
}
</script>
三、 getters 的用法
与之前的用法保持一致:
const store = createStore({
state(){
return{
num:1,
}
},
getters:{
doubleNum(state){
return state.num*2
}
},
})
//使用1:直接在template中使用
<template>
{{$store.getters.doubleNum}}
</template>
//使用2:利用计算属性获取
<template>
<div>
{{getDouble}}
</div>
</template>
<script>
import { useStore } from "vuex"
import { computed } from 'vue'
export default {
setup(){
const store = useStore()
return{
state:store.state,
getDouble:computed(()=>store.getters.doubleNum)
}
}
}
</script>
四、mutations 和 actions 的用法
调用 mutations 内的方法时,使用 commit 调用。上述的使用场景2 就是 mutations 方法的调用。
而 actions 异步更新 state 中的数据,还是需要经过 mutations 。
<template>
<div>
{{state.num}}
<button @click="asyncUpdateNum">更新num</button>
</div>
</template>
<script>
import { useStore } from "vuex"
export default {
setup(){
const store = useStore()
return{
state:store.state,
asyncUpdateNum(){
store.dispatch('updateNum',88)
}
}
}
}
</script>
组件内可以通过 this.$store 属性访问store容器,使用 composition API 可以通过 useStore代替。其他的用法基本相同。
相关文章
- 金融服务领域的大数据:即时分析
- 影响大数据、机器学习和人工智能未来发展的8个因素
- 从0开始构建一个属于你自己的PHP框架
- 如何将Hadoop集成到工作流程中?这6个优秀实践必看
- SEO公司使用大数据优化其模型的5种方法
- 关于Web Workers你需要了解的七件事
- 深入理解HTTPS原理、过程与实践
- 增强分析:数据和分析的未来
- PHP协程实现过程详解
- AI专家:大数据知识图谱——实战经验总结
- 关于PHP的错误机制总结
- 利用数据分析量化协同过滤算法的两大常见难题
- 怎么做大数据工作流调度系统?大厂架构师一语点破!
- 2019大数据处理必备的十大工具,从Linux到架构师必修
- OpenCV中的KMeans算法介绍与应用
- 教大家如果搭建一套phpstorm+wamp+xdebug调试PHP的环境
- CentOS下三种PHP拓展安装方法
- Go语言HTTP Server源码分析
- Go语言HTTP Server源码分析
- 2017年4月编程语言排行榜:Hack首次进入前五十