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










