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

首先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>

完成！！！