作为 vue 全家桶的一员,Vuex 的重要性不言而喻,不管是用来管理状态,还是封装 Controler 都很好用。不过在一些体量较小的项目中,为了几个简单的状态或者处理函数而引入 Vuex,就像是高射炮打蚊子,大材小用了
这时候就可以模拟 Vuex,自己写一个简单的 Store, 用来管理状态并实时更新数据
一、构造函数
模拟 Vuex 的结构,创建一个 Class
export default class Store {
constructor({ states, actions, mutations }) {
// 状态
this.states = states || {};
// 异步函数
this.actions = actions || {};
// 同步函数
this.mutations = mutations || {};
}
// 调用 mutations 中的同步函数
commit = (fun, params) => {};
// 调用 actions 中的异步函数
dispatch = (fun, params) => {};
// 更新 states 的状态
update = (key, value) => {};
}
然后实例化一个 Store
import Store from './store';
import states from './states';
import actions from './actions';
import mutations from './mutations';
const store = new Store({
states,
actions,
mutations,
});
export default store;
然后挂到 vue 的原型上,通过 vue.$store 的方式使用,一个高仿 vuex 的架子就搭好了
// 在 main.js 中引入 Store import store from './store/index'; Vue.prototype.$store = store;
二、实现操作函数(commit、dispatch、update)
在 Vuex 中,如果需要更新 state 中的状态,需要通过 commit 调用 mutations 中的方法
而 mutations 的方法都具备一个默认的参数 state,因此 commit 方法可以这么写:
// 向 mutations 中的传入固定参数 state
commit = (fun, params) => {
this.mutations[fun](this.states, params);
};
不过由于一些历史遗留问题,我习惯用 this.states 的方式获取 state(这个习惯不好),所以改成了这样:
commit = (fun, params) => {
if (fun) {
this.mutations[fun].call(this, params);
} else {
return false;
}
};
类似的 actions 和 update 可以参考 commit 的写法
三、响应式对象
目前的 store 有一个致命的问题:state 更新之后并不会即时渲染到视图层,这时候 Vue 2.6.0 新增的 observable() 就派上用场了
如果将一个对象作为入参传给 Vue.observable() ,经过处理之后,这个对象在 Vue 内就可以实时更新,其返回值可以直接用于 render 和 computed 中,并且会在发生改变时触发相应的更新
于是 Store 的构造函数需要改一改:
constructor({ states, actions, mutations }) {
// 状态
this.states = Vue.observable(states || {});
// 异步函数
this.actions = Vue.observable(actions || {});
// 同步函数
this.mutations = Vue.observable(mutations || {});
}
注意:
假如对象 obj 经过 observable() 处理之后,赋值给了新对象 new_boj
在 Vue 2.x 中,直接修改 obj 也会触发 new_boj 的更新,但在 Vue 3.x 中,由于响应机制的变更,只有修改 new_obj 才能触发视图层的更新
所以在使用 observable() 的时候,最好始终操作使用 observable() 处理后的 new_obj
四、简单用用
超低配的 Vuex 已经写好了,上面已经把 store 挂到 Vue 的原型上,所以可以直接使用
假如 state 中已经存在一个状态 name,在组件中可以通过 computed 去获取
computed: { name() { return this.$store.states.name; }, }
如果需要修改状态,可以通过 $store.update()
methods: { updateName(val) { this.$store.update('name', val); } }
或者使用 $store.commit() 调用 mutations 中的方法
methods: { commitName(val) { this.$store.commit('handleNameChange', val); } }
大功告成~
来自:https://www.cnblogs.com/wisewrong/archive/2019/09/10/11497394.html
在学习Vuex之前,先了解一下“单向数据流”。Vuex核心就是它的store,其中,有三个重要的部分,State:通过它存取多个组件共享的数据。Mutations:可以改变State中的数据,Actions:提交mutation,可以包含任意异步操作这一步不是必要的。
Vuex是一个专门为Vue.js框架设计的、用于对Vue.js应用程序进行状态管理的库,它借鉴了Flux、redux的基本思想,将共享的数据抽离到全局,以一个单例存放,同时利用Vue.js的响应式机制来进行高效的状态管理与更新。
主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用。搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径
vuex 规定更改 state 的唯一方法是提交 mutation,主要是为了能用 devtools 追踪状态变化。那么,提交 mutation 除了最主要的更改 state,它还做了其它一些什么事情呢,让我们来一探究竟。
Vuex为Vue.js应用管理状态.。对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变。对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧。
已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成,然而commit中只能传入两个参数,第一个就是mutations,第二个就是要传入的参数
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数 mutation 是同步执行,不是异步执行。
其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。一种是state里的数据全部是通过请求来触发action或mutation来改变
首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :然后 在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:接下来,在 main.js里面引入store,然后再全局注入一下
开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我们使用jQuery插件的时候,一桩麻烦事就是既要在每个数据变更后,写代码去改变视图,又要考虑html上各种输入
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!