Vue - vuex使用

场景：vue全局获取登录用户名

一、main.js里配置安装

//安装vuex状态管理模式
import Vuex from 'vuex'
import store from './store.js'
Vue.use(Vuex)

new Vue({
  el: '#app',
  router,
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { App },
  template: '<App/>'
})

二、store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 这里定义初始值
let state = {
  adminName: ''
};
//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：
// 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
// 这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
//需要以相应的 type 调用 store.commit 方法：你可以在组件中使用 this.$store.commit('xxx') 提交 mutation
//store.commit({
// type: 'increment',
//   amount: 10
// })对象方式提交
const mutations = {
  //登录
  login(state, name) {
    state.adminName = name;
  },
  //登出
  loginout(state) {
    state.adminName = '';
  }
};

// 事件触发后的逻辑操作
// 参数为事件函数this.$store.dispatch('login', this.user)
 dispatch采用Promise链式调用
// this.$store.dispatch('login', this.user).then(() => {
//   this.$notify({
//     type: 'success',
//     message: '欢迎你,' + this.user.name + '!',
//     duration: 3000
//   })
// computed: {  //挂载获取数据，否则不会根据store动态改变
//   user () {
//     return this.$store.state.user
//   }
const actions = {
  // 登录
  login(context, name) {
    context.commit('login',name);
  },

  // 登出
  loginout(context) {
    context.commit('loginout');
  }

};

// 返回改变后的数值
const getters = {};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

三、应用

登录：

 .then((res) => {
                console.log(res);
                if (res.data.code == 1) {//登陆成功
                  this.$router.push("/toMain/userInfo");//进入主页
                  this.$message({
                    message: '恭喜你，登陆成功',
                    type: 'success',
                    center: true
                  });
                  this.$store.dispatch('login', res.data.data);//状态管理
                } else {
                  this.$message.error('用户名或密码错误！');
                }
              })

 computed: {
      name() {
        return this.$store.state.adminName;
      }
    }

<span>当前用户：{{name}}</span>

退出登录：

 loginout() {
        this.$http.get(this.loginOutUrl).then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            this.$store.dispatch('loginout');//状态管理
            this.$router.push('/');
          } else {
            this.$message.error("退出登录失败")
          }
        })
      }

四、资料参考

https://blog.csdn.net/TONELESS/article/details/71638369

https://www.cnblogs.com/yesyes/p/6659292.html

https://www.cnblogs.com/DM428/p/7293867.html