时间戳

首页 > 解决方案 > Vuex 未捕获类型错误：无法读取 .vue 和 .js 文件中未定义的属性“提交”

vue.js - Vuex 未捕获类型错误：无法读取 .vue 和 .js 文件中未定义的属性“提交”

问题描述

这是我第一次学习使用 vuex，我正在构建一个带有硬编码值的简单授权。如果在Confirm.vue中输入的密码匹配，我想将用户重定向到Products.vue 。

Products.vue 将包含用户在输入正确密码之前无法访问的安全内容。

结果TypeError: Cannot read property 'commit' of undefined在我的 Confirm.vue 文件中不断给出未捕获的错误

确认.vue

    <template>
      <div>
        <p>Please enter password</p>
        <input
          type="password"
          name="password"
          v-model="input.password"
          placeholder="Password"
        />
        <button type="button" v-on:click="login()">Go to admin</button>
      </div>
    </template>
    
    <script>
    export default {
      name: "Confirm",
      data() {
        return {
          input: {
            password: "",
          },
        };
      },
      methods: {
        login() {
          if (this.input.password == "123") {
            this.$store.commit("setAuthentication, true");
            this.$router.replace({ name: "products" });
          } else {
            console.log("incorect password");
          }
        },
      },
    };
    </script>

所以我的假设是$store没有定义，但我已经在我的 Main.js 中为它设置了常量，并且还创建了一个新的 Vue。

主.js

    import Vue from "vue";
    import Vuex from "vuex";
    import App from "./App.vue";
    import VueRouter from "vue-router";
    import Confirm from "./pages/admin/Confirm.vue";
    import Products from "./pages/admin/Products.vue";
    
    Vue.config.productionTip = false;
    Vue.use(VueRouter);
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
      state: {
        authenticated: false,
      },
      mutations: {
        setAuthentication(state, status) {
          state.authenticated = status;
        },
      },
    });
    const router = new VueRouter({
      routes: [
        {
          path: "/",
          redirect: {
            name: "main",
          },
        },
        {
          path: "/admin/confirm",
          name: "confirm",
          component: Confirm,
        },
        {
          path: "/admin/products",
          name: "products",
          component: Products,
        },
      ],
    });
    
    new Vue({
      render: (h) => h(App),
      router: router,
      store: store,
    }).$mount("#app");

最后，这是 App.vue 的内容

应用程序.vue

    <template>
      <router-view />
    </template>
    
    <script>
    export default {
      name: "app",
    };
    </script>

标签： vue.jsvuex

解决方案

你称突变是错误的。

您正在使用这种语法 -

this.$store.commit("setAuthentication, true");

相反，你应该使用这个

this.$store.commit("setAuthentication", true);

推荐阅读