Vue3で Vuexを使う方法（導入方法・呼び出し方）

インストール

npm install vuex@next --save
npm audit
npm audit fix

/resources/js/store/index.jsを手動で作成

import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      count: 0,
      hoge: 'うんこ'  // 新しい状態を追加
    };
  },
  mutations: {
    increment(state) {
      state.count += 1;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

/resources/js/app.js

または

/resources/js/main.js

を編集

import { createApp } from 'vue';
import App from './components/App.vue';
import "vuetify/dist/vuetify.min.css";
import "@mdi/font/css/materialdesignicons.css"; 
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import router from '../../router/index.js';  
import store from './store/index.js'; //追記

const vuetify = createVuetify({
    components,
    directives,
});

const app = createApp(App);
app.use(router); 
app.use(vuetify); 
app.use(store);  //追記

app.mount('#app');

あとはvuexの内容を呼び出したいvueファイルにて

export default {
    setup() {
        const store = useStore();

        onMounted(() => {
            console.log(store.state.hoge); // "うんこ" が出力されます
        });

    },
};

コンパイル後、ブラウザのコンソールに うんこが表示されたら成功