vue非関連コンポーネントのデータ転送と保存(state)を解決し、this.$store.commit is not a function

5865 ワード

1.srcファイルの下にstoreファイルを作成し、storeを追加します.jsファイル.内容は大体.mutationsでは必要なプログラムを処理し、外部から直接値を伝えればよい.
import vuex from 'vuex'
import Vue from 'vue'
Vue.use(vuex)
export default new vuex.Store({
    /*state  */
    state:{
        user:{}
    },
    mutations:{
        setUser(state,v){
            state.user=v;
        }
    }
})

2.メールでjsのvueインスタンスに導入する必要があります.例
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import * as api from './config'
import mycom from './components/index'
import store from './store/store'
Vue.prototype.$api = api
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(mycom)
Vue.test = function () {
  alert()
}
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store:store,
  template: '',
  components: { App }
})

3.例えばlogin.vueで参照される場合、methodsで一般的に使用されます.
<template>
  <div>
    <el-input v-model="user.username">el-input>
    <el-input v-model="user.password">el-input>
    <el-input v-model="user.checkcode">el-input>
    <img :src="codeurl" alt="">
    
   
    <router-link to="/demo/222">2222router-link>
    <router-link to="/demo/111">1111router-link>
  div>
template>

<script>
  export default{
    data () {
      return {
        user: {
          username: '',
          password: '',
          checkcode: ''
        },
        codeurl: ''
      }
    },
    methods: {
      loginUser () {
        this.$store.commit('setUser',this.user)
        this.$router.push('/demo/11')
        /*this.$api.login(this.user).then(function (res) {
          console.log(res.data)
        })*/
      }
    }
  }
script>

<style scoped>

style>

その中でsetuuserの名前は対応しなければならなくて、名前は勝手ですが、英語の初心者のために出発したほうがいいです.http://blog.csdn.net/github_26672553/article/details/53265126
http://www.cnblogs.com/jasonwang2y60/p/6433082.html