鍍金池/ 問答/HTML/ 關于vuex中的this.$store.commit()問題

關于vuex中的this.$store.commit()問題

1.第一次使用vuex, 很多地方都不懂, 輸入的賬號和密碼都是正確的, 登陸頁面使用 this.$store.commit('token', res.data.data)報錯

clipboard.png

main.js

import Vuex from "vuex"
Vue.use(Vuex)

login頁面

    <div class="login_form">
      <el-form :label-position="labelPosition" label-width="80px" :model="form">
        <el-form-item>
          <i class="account_icon"></i>
          <el-input v-model="form.userName" placeholder="登錄賬戶"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <i class="password_icon"></i>
          <el-input type="password" v-model="form.password" auto-complete="off" placeholder="登錄密碼"></el-input>
        </el-form-item>
        <div class="checkbox">
          <input type="checkbox">
          <span class="login_password">記住密碼</span>
        </div>
        <div>
          <button @click="onSubmit" :plain="true">登錄</button>
        </div>
        <div class="login_embellish">
          <i class="embellish_one"></i>
        </div>
      </el-form>
      <i class="modifier_left"></i>
      <i class="modifier_right"></i>
    </div>

js

export default {
  data() {
    return {
      labelPosition: "right",
      form: {
        userName: "",
        password: ""
      }
    }
  },
  methods: {
    onSubmit() {
      let paramsData = {
        username: this.form.userName,
        password: this.form.password
      };
      this.$ajax.post(this.$api.Login, paramsData).then(res => {
        if (res.status == 200) {
          console.log("res", res);
          this.$store.commit('token', res.data.data)
          if(res.data.status == 401) {
            this.$message.error(res.data.message);
          }
        }
      })
      .catch(err => {
        console.log(err);
      })
    }
  }
}
回答
編輯回答
念舊

this.$store是undefined，當然報錯啦

2017年11月6日 14:03
編輯回答
情未了

看看是不是忘了注入state到實例
vuex文檔

const app = new Vue({
  el: '#app',
  // 把 store 對象提供給 “store” 選項，這可以把 store 的實例注入所有的子組件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})
2017年5月9日 19:52