使用vue之vuex进行状态管理

古城微笑少年丶 2022-03-12 04:20 215阅读 0赞

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

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

//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
          }
      },

![在这里插入图片描述][20190305095341739.png]

![在这里插入图片描述][20190305095439289.png]  
![在这里插入图片描述][20190305095419973.png]

[20190305094523560.png]: /images/20220312/7fc1d1763bf94722bf103278beda6b0f.png
[20190305095341739.png]: /images/20220312/90cf4d6b8330469eba67fca2751c21da.png
[20190305095439289.png]: /images/20220312/4938f3e534434ad1a12c6a3f71d6901d.png
[20190305095419973.png]: /images/20220312/a8c4b280b5174457adab21a693b4bea3.png