Console

vue.runtime.esm.js:4573 [Vue warn]: Property or method "setRegisterEmail" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Registration.vue

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import { computed } from 'vue';
export default {
    computed: {
        ...mapState('authentication', [
            'registerEmail',
            'registerPassword',
        ]),
    },
    ...mapMutations('authentication', [
        'setRegisterEmail',
        'setRegisterPassword',
    ]),
    ...mapActions('authentication', [
        'register',
    ]),
};
</script>
<template>
    <v-container>
        <v-layout row wrap>
            <v-flex xs6 offset-xs3>
                <h1>Register</h1>
                <v-text-field label="Email" placeholder="Email" :value="registerEmail" @input="setRegisterEmail">
                </v-text-field>
                <v-text-field label="Password" placeholder="Password" type="password" autocomplete="new-password" :value="registerPassword" @input="setRegisterPassword"> 
                </v-text-field>
                <v-btn color="primary">
                    <v-icon>mdi-account-circle</v-icon>
                    Register
                </v-btn>
                <router-view></router-view>
            </v-flex>
        </v-layout>
    </v-container>
</template>

App.vue

<script>
import { computed } from 'vue'
import Toolbar from '@/components/Toolbar.vue';
export default {
  components: {
    Toolbar,
  },
};
</script>



<template>
  <v-app>
    <Toolbar/>
    <router-view></router-view>
  </v-app>
</template>

Authentication.js

import HTTP from '../http'
export default {
    namespaced: true,
    state: {
        registerEmail: 'hello',
        registerPassword: 'world',
    },
    actions: {
        register({commit, state}) {
            return HTTP().post('/auth/register', {
                email: state.registerEmail,
                password: state.registerPassword,
            });
        },
    },
    mutations: {
        setRegisterEmail(state, email) {
            state.registerEmail = email;
        },
        setRegisterPassword(state, password) {
            state.registerPassword = password;
        },
    },
};

Index.js

import Vue from 'vue'
import Vuex from 'vuex'
import authentication from './authentication'

Vue.use(Vuex);


export default new Vuex.Store({
  strict: true,
  state: {
    baseUrl: 'api'
  },
  modules: {
    authentication,
  },
  mutations: {

  },
  actions: {
    
  }
})

Main.js

import 'vuetify/dist/vuetify.min.css';
import { sync } from 'vuex-router-sync'

import Vue from 'vue'
import Vuetify from 'vuetify'

import store from './stores/index'

import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false;

import './assets/main.css'

Vue.use(Vuetify);
sync(store, router);

new Vue({
  router,
  vuetify : new Vuetify(),
  store,
  render: (h) => h(App),
}).$mount('#app')

Http.js

import axios from 'axios'
import store from './stores/'

export default () => {
    return axios.create({
        baseURL: store.state.baseUrl,
        timeout: 1000,
    });
};

Package.json

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@vue/eslint-config-airbnb": "^7.0.0",
    "axios": "^0.27.2",
    "lodash": "^4.17.21",
    "pinia": "^2.0.16",
    "vue": "^2.7.7",
    "vue-router": "^3.5.4",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@mdi/font": "^7.0.96",
    "@nuxtjs/vuetify": "^1.12.3",
    "@vitejs/plugin-legacy": "^2.0.0",
    "@vitejs/plugin-vue2": "^1.1.2",
    "@vitejs/plugin-vue2-jsx": "^1.0.2",
    "eslint": "^8.5.0",
    "eslint-plugin-vue": "^9.0.0",
    "material-design-icons-iconfont": "^6.7.0",
    "terser": "^5.14.2",
    "vite": "^3.0.2"
  }
}

.eslintrc.cjs

/* eslint-env node */
module.exports = {
  "root": true,
  "extends": [
    "plugin:vue/essential",
    "@vue/airbnb"
  ],
  rules: {
    'no-param-reassign': 'off',
    'arrow-body-style': 'off',
  },
}

CodePudding user response：

It looks like you tried to map setRegisterEmail in your component, but you've incorrectly added it to the root of the component definition:

export default {
    // ❌ invalid component option
    ...mapMutations('authentication', [
        'setRegisterEmail',
        'setRegisterPassword',
    ]),
    // ❌ invalid component option
    ...mapActions('authentication', [
        'register',
    ]),
};

To properly map mutations and actions with mapMutations and mapActions, put them under the methods option:

export default {