vite2 + Vue3中Vuex4的基本配置

Vuex官网 https://vuex.vuejs.org/zh/installation.html#%E7%9B%B4%E6%8E%A5%E4%B8%8B%E8%BD%BD-cdn-%E5%BC%95%E7%94%A8

1. 安装

 npm install vuex@next --save

2. src 下新建 store/index.js

store/index.js

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    updatecount(state,val) {
      state.count = val
    }
  },
  getters: {},
  actions: {},
  modules: {}
})
export default store

3. main.js引入

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

createApp(App).use(router).use(store).mount('#app')

这样就可以正常使用了。使用其实和vue2 + vuex3的方式差不多。不同的就是vue2+vuex3 可以使用this.$store的方式来使用，但是vue3 + vuex4中 就不要想 this 这东西了。提供了 useStore 方法

4. 组件中使用

<template>
  <h1>vux:count -> {{count}}</h1>
  <el-button type="primary" @click="count = '哈哈哈'">点击修改vuex中count的值</el-button>
</template>
<script>
  import { computed } from 'vue'
  import { useStore } from 'vuex'
  export default {
    setup(props, context) {
      const store = useStore()   //这里store  相当于vue2中使用vuex3中的 this.$store
      let count = computed({
        get() {
          return store.state.count
        },
        set(val) {
          store.commit('updatecount', val)
        }
      })
      return {
        count
      }
    }
  }
</script>

使用setup 语法糖的方式 也是一样的。更方便一些，不用return了  <script setup>的时候 自动帮我们  returne