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”进行判断