VUE学习之路 —— VUEX

什么是vuex

官方解释：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 通俗来讲，vuex就像一个仓库，我们把公共的状态会抽离出来放进里面。

vuex怎么用

1. 安装vuex

    npm install vuex --save

2. 引入并使用vuex

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex); //使用vuex

目录结构

modules

import { loginByEmail, getUserInfo } from './../../api/user'; //引入接口中的方法
import Cookies from 'js-cookie';

//状态值
const users = {
  state:{
    user: '',
    status: '',
    uid: '',
    name: '',
    token:Cookies.get('token'),
    introduction: '',
    roles: []
  },
  //同步修改状态值
  mutations:{
    SET_NAME:(state,username)=>{
      state.username = username;
    },
    SET_ROLES:(state,role)=>{
      state.role = role;
    },
    SET_UID:(state,uid)=>{
      state.uid = uid;
    },
    SET_INTRODUCTION:(state,introduction)=>{
      state.introduction = introduction;
    },
    SET_TOKEN:(state,token)=>{
      state.token = token;
    }
  },
  actions: {
    // 获取用户信息
    GetUserInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getUserInfo(state.token).then(response => {
          const data = response.data;
          commit('SET_ROLES', data.role);//将数据写入state中
          commit('SET_NAME', data.name);
          commit('SET_UID', data.uid);
          commit('SET_INTRODUCTION', data.introduction);
          resolve(response);
        }).catch(error => {
          reject(error);
        });
      });
    }
  }
}
export default users

getters.js

const getters = {
  username: state => state.username,
  role:state => state.role,
  uid:state => state.uid,
  introduction:state => state.introduction,
  token:state => state.token
}

export default getters

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user';
import getters from './getters'

Vue.use(Vuex); //使用vuex

//创建vuex实例保存到store中
const store = new Vuex.Store({
  modules:{
    user
  },
  getters //将getters暴露
})

//导出store
export default store

vuex在视图中应用

<template>
  <div style="background: #135f92">
    <el-dropdown class="aside" trigger="click" @command="handleCommand">
      <div class="block">
        <img :src="circleUrl" @click="IsShowUserInfo()"/>
        <!--使用值-->
        <span class="show_username">{{username}}</span>
      </div>
    </el-dropdown>

  </div>
</template>
<script>
  export default {
    data(){
      return{
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        username:""
      }
    },
    mounted(){
      this.GetUserInfo()
    },
    methods:{
      GetUserInfo(){
      //异步获取状态值
       
        this.$store.dispatch('GetUserInfo').then((res) => {
           this.username = res.data.name
        }).catch(err => {
        });
      }
    }
  }
</script>

dispatch与commit的区别

主要区别是：

dispatch：含有异步操作，例如向后台提交数据，写法：

this.$store.dispatch(method, value);

commit：同步操作， 写法：

this.$store.commit(method,value)