vue非関連コンポーネントのデータ転送と保存(state)を解決し、this.$store.commit is not a function
5865 ワード
1.srcファイルの下にstoreファイルを作成し、storeを追加します.jsファイル.内容は大体.mutationsでは必要なプログラムを処理し、外部から直接値を伝えればよい.
2.メールでjsのvueインスタンスに導入する必要があります.例
3.例えばlogin.vueで参照される場合、methodsで一般的に使用されます.
その中でsetuuserの名前は対応しなければならなくて、名前は勝手ですが、英語の初心者のために出発したほうがいいです.http://blog.csdn.net/github_26672553/article/details/53265126
http://www.cnblogs.com/jasonwang2y60/p/6433082.html
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