首先学习vuex必须先知道vue原理
Vue是一个典型的MVVM框架，模型（Model）只是普通的JavaScript对象，修改它则视图（View）会自动更新。这种设计让状态管理变得非常简单而直观
Vue实现这种数据双向绑定的效果，需要三大模块：

Observer：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
Compile：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
Watcher：作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
大概分为这么几类
vuex是什么呢
vuex是实现状态管理的工具 可以用来管理大型项目的工具
下面是一个简单的vuex的结构
index是主文件

//index//

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters' 
import * as actions from './actions'
import * as mutations from './mutations'

Vue.use(Vuex)

const state = {
  username: '123' 
}

const store = new Vuex.Store({
  state,   
  getters, 
  actions, 
  mutations
})

export default store  

进行一个简单地账户管理

//actions文件
// 给action注册事件处理函数。当这个函数被触发时候，将状态提交到mutations中处理
export function modifyAName({commit}, name) { // commit 提交；name即为点击后传递过来的参
    return commit ('modifyAName', name)
}

 
// ES6精简写法
//export const modifyAName = ({commit},name) => commit('modifyAName', name)


//motations文件
// 提交 mutations是更改Vuex状态的唯一合法方法
export const modifyAName = (state, name) => { // A组件点击更改餐馆名称为 A餐馆
  state.resturantName = name // 把方法传递过来的参数，赋值给state中的resturantName
}

 //getters文件
// 获取最终的状态信息
export const resturantName = state => state.resturantName

//组件A/methods函数
sub(){
      let log = document.querySelector("#log").value;
      let reg = document.querySelector("#reg").value;
      userapi("/users/userpsw",{name:log,psw:reg}, (mes) => {
        if(mes === 1){
          console.log(log)
          
          this.$store.commit("modifyAName",log)
          // 账户名称    
          console.log(this.$store.getters.resturantName)
          document.querySelector(".text").innerHTML = "登录成功"
          this.$router.push({ path: '/my' })
        }else{
          document.querySelector(".text").innerHTML = "登录失败"
        }
      })
    },

组件B/computed
 computed:{
      username(){//调用username即可   {{username}}
         return  this.$store.getters.resturantName
      }
  },