前提背景

项目升级，需要从Nuxt2 升级为 Nuxt3，vuex部分也相应升级

官网建议

Nuxt3官网建议使用pina来进行数据管理，没有直接把vuex注入到框架中，所以需要单独下载vuex4.0的版本到项目中

正文

示例代码都为js所写,没有使用ts！

1.目录结构(有关的)

pages
  index.vue
plugins
  store.client.js
store
  /modules
    counter.js
  index.js
nuxt.config.js

2.下载vuex版本

npm install vuex@next

3.定义

store/index.js

import { createStore } from 'vuex'
import counter from './modules/counter';

const store = createStore({
        modules: {
           counter,
        },
        state: {
           loading: false
        },
        mutations: {},
        actions: {},
        getters: {}
})

export default store

store/modules/counter.js

const state = {
    counter: 0,
};

const mutations = {
    increment(state) {
        state.counter++;
    },
};

const actions = {
    increment({ commit }) {
        commit('increment');
    },
};

const getters = {
    counter(state) {
        return state.counter;
    },
};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters,
};

4. 注册

在Nuxt中，使用Plugins的方法,在nuxt.config.js进行注册

plugins/store.client.js

import { defineNuxtPlugin } from '#app';
import store from '../store';

export default defineNuxtPlugin((nuxtApp) => {
	nuxtApp.vueApp.use(store);
});

export default defineNuxtConfig({
  ...,
  plugins: [
    '~/plugins/store.client.js',
  ],
})

5. 使用

因为是迁移，代码不使用setup的写法，所以还是原来的options的写法，不使用pina主要也是因为项目中大量的使用了vuex的辅助函数

<template>
  <h3>counter:{{ counter }}</h3>
  <Button @click="increment"> +1 </Button>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "Home",
  components: {},
  data() {
    return {
    };
  },
  computed: {
    ...mapState("counter",["counter"]),
  },
  methods: {
    ...mapMutations("counter", ["increment"]),
  },
  mounted() {
    console.log(this.counter); // 0
    console.log(this.$store.state.loading); // false
  },
};
</script>

6. setup

如何需要在setup中使用store

<template>
    <h3>counter:{{ counter }}</h3>
    <Button @click="increment"> +1 </Button>
</template>

<script setup>
import { useStore } from 'vuex';
import { computed } from 'vue';

const store = useStore();
const counter = computed(() => store.state.counter.counter);

function increment() {
    store.dispatch("counter/increment");
}
</script>

其他

就到这里，如果还有需要补充的，评论区讨论！感谢观看！