使用vue之vuex进行状态管理 - 好文

首先学习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 } },

热门工具换一换