vuex简单应用----点击登录将user用户名传递给另一个页面

1、login.vue
<button class="content-footer"  @click="showState(user)" >登录</button>

//user的传值
showState (user) {
  if (!this.user || !this.password) {
    this.alert = !this.alert
    this.alertdata = '账号或密码不能为空！'
  } else {
    this.$store.dispatch('getUser', user)
    this.$router.replace('/my')  //页面进行跳转 使用replace可以让后面的页面都保存这个用户名
  }
},

2、store /index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    user: ''
  },
  actions: {
    getUser (ctx, user) {
      ctx.commit('getUser', user)
    }
  },
  mutations: {
    getUser (state, user) {
      state.user = user
    }
  }
})

3、需要在main.js中调入这个store

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

2、在my.vue中使用这个user用户名的值

 （1）、直接使用

          {{this.$store.state.city}}

(2)、将这个数据保存起来

   import {mapState} from 'vuex'

   computed: mapState({
      user: state => state.user   //将这个值赋值给变量user
   })
  }

使用这种方法就可以直接使用{{user}}使用，还可以进行v-show=“user”进行判断