解决vue不相关组件传递数据并保存(state),解决报错this.$store.commit is not a function

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。在main.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: '<App/>',
  components: { App }
})

3。在看在哪里引用setUser方法,例如在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="">
    <!--<el-button type="sucess" @click="loginUser">提交</el-button>-->
   <!-- <a href="#/demo/111">111</a>
    <a href="#/demo/222">222</a>-->
    <router-link to="/demo/222">2222</router-link>
    <router-link to="/demo/111">1111</router-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>

其中setUser名字必须对应,名字随意,但最好为英文
新手上路,不习勿喷
http://blog.csdn.net/github_26672553/article/details/53265126

http://www.cnblogs.com/jasonwang2y60/p/6433082.html

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值