0
点赞
收藏
分享

微信扫一扫

关于在vue3中使用vuex与在vue2中使用vuex的区别

飞进科技 2022-07-27 阅读 79

首先vue2中vuex版本是4.x以下,vue3中使用vuex需要保证vuex版本在4.x及以上。

以下说一说怎么在vue3中使用vuex,与vue2大同小异

首先在views新建一个store文件夹,写index.js(这里只写demo,所以不分模块了。只做展示使用)

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
state () {
return {
count: 0
}
},
mutations: {
increment (state) {
state.count++
}
}
})
export { store }

在main.js中注册

import { createApp } from 'vue'
import App from './App.vue'


const app = createApp(App)
app.use(store)
app.mount('#app')

在组件类使用

<template>
<div>{{ count }}</div>
<div @click="change">触发更新</div>
</template>

<script>
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
name: 'login',
setup () {
const store = useStore()
console.log('store',store.state.count)
const change = () => {
console.log('触发更新')
store.commit('increment')
}
return {
// 在 computed 函数中访问 state
count: computed(() => store.state.count),
change
}
}
};
</script>

<style scoped>

</style>

完成!!!

 

长风破浪会有时,直挂云帆济沧海



举报

相关推荐

0 条评论