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