首先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>
完成!!!
长风破浪会有时,直挂云帆济沧海