首先说说什么叫“前端状态"。所有程序都有“状态”,状态表现在代码中的各种类型的变量,在程序运行的过程中发生改变的过程,而我们编写的程序就是在控制这些“状态”如何发生改变。
数据状态管理是近年随着在 react/vue 等现代化的前端框架流行起来的,主要应用在单页应用 SPA(Single Page Application)中。在以前前端“刀耕火种”的年代还没有这种概念的。
前端技术在如火如荼地发展,前端工作也越来越复杂,现阶段的前端不在只是传统意义上的“切图仔”,更多地负责页面数据逻辑处理,原有的很多技术体系、解决方案已经不能很好的支撑这些越来越复杂的需求。而且,现在 Vue/React 等前端框架都是使用 MVVM 的设计模式,都是依靠数据驱动视图的更新。
比如 Vue 使用了 Virtual dom 的 思想。将 DOM 放到内存中,当 data 发生变化的时候,生成新的 Virtual DOM,再将它和之前的 Virtual DOM 通过一个 diff 算法进行对比,将被改变的内容在浏览器中渲染,大大减少了对 DOM 的操作,提升了前端性能。
其次数据管理逻辑和页面渲染逻辑分离,使得代码更容易维护。操作数据的地方不会关心页面如何展示,展示页面的地方不会关心数据从哪里来的。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
state 是存储状态,它是一个对象。
const store = new Vuex.Store({
state: {
count: 10,
price: 10,
},
})
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性。
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
computed: mapState({
count: (state) => state.count,
price: (state) => state.price,
}),
}
// 当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。
computed: mapState(['count', 'price'])
有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数,这时候我们就用到 getter 属性。
export default new Vuex.Store({
state: {
list: [1, 2, 3, 4]
},
getters: { // 这个主要是对状态的处理,相当于把状态处理的方法抽成公共部分来管理了
filterArr(state) { // 一般化getter
return state.list.filter((item, index, arr) => {
return item % 2 === 0;
})
},
getLength(state, getter) { // 方法里面传getter,调用modifyArr来计算长度
return getter.filterArr.length;
}
})
然后在组件中可以用计算属性 computed 来访问这些派生转态。
computed: {
list() {
return this.$store.getters.filterArr
},
}
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性,当我们想在组件里面引入多个 getter 时,可以使用 mapGetters:
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['filterArr', 'getLength']),
},
}
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type) 和 一个 回调函数 (handler)。 它会接受 state 作为第一个参数,提交载荷(Payload)作为第二个参数。
const store = new Vuex.Store({
state: {
count: 1,
},
mutations: {
increment(state, n) {
// 变更状态
state.count += n
},
},
})
store.commit('increment', 10)
在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读:
mutations: {
increment (state, payload) {
state.count += payload.count
}
}
store.commit('increment', {
count: 10
})
提交 mutation 的另一种方式是直接使用包含 type 属性的对象:
store.commit({
type: 'increment',
count: 10,
})
在组件中提交 Mutation 你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
]),
},
}
Action 类似于 mutation,不同在于:
const store = new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++
},
},
actions: {
increment(context) {
context.commit('increment')
},
},
})
注意:vuex 的 mutation 中不能做异步操作
vuex 中所有的状态更新的唯一方式都是提交 mutation,异步操作需要通过 action 来提交 mutation(dispatch)。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地使用 vuex
Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
const moduleA = {
state: { ... },
getters: { ... },
mutations: { ... },
actions: { ... },
}
const moduleB = {
state: { ... },
getters: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
我们先来看一下 vuex 的使用方法
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
})
通过上面可以看到,vuex 是通过 Vue.use() 注入到 Vue 的。使用Vue.use() 的插件,如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。
首先来实现一个 Store 类,代码如下
class Store {
constructor(options) {
this.state = new Vue({
data: options.state,
})
this.mutations = options.mutations
this.actions = options.actions
options.getters && this.handleGetters(options.getters)
}
commit = (type, arg) => {
this.mutations[type](this.state, arg)
}
dispatch(type, arg) {
this.actions[type](
{
commit: this.commit,
state: this.state,
},
arg
)
}
// getters为参数 而this.getters是实例化的
handleGetters(getters) {
this.getters = {}
Object.keys(getters).forEach((key) => {
Object.defineProperty(this.getters, key, {
get: () => {
return getters[key](this.state)
},
})
})
}
}
使用Vue.use() 的插件,必须提供 install 方法。并将 Vue 作为参数传入。
let Vue
function install(_Vue) {
Vue = _Vue
Vue.mixin({
beforeCreate() {
if (this.$options.store) {
Vue.prototype.$store = this.$options.store
}
},
})
}
vuex 最终 export 了一个对象这个对象包括了一个 install 方法和一个类 Store, 注意对应我们的使用方法。
export default { Store, install }
1、新建 store.js
import Vue from 'vue'
import Vuex from './store'
Vue.use(Vuex)
const state = {
count: 0,
}
const getters = {
getCount(state) {
return state.count
},
}
const mutations = {
addCount(state, payload) {
state.count += payload
},
}
const actions = {
asyncAdd(context, payload) {
context.commit('addCount', payload)
},
}
const store = new Vuex.Store({
state,
mutations,
getters,
actions,
})
export default store
2、main.js 引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
Vue.config.productionTip = false
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app')
3、页面使用数据状态管理
<template>
<div>
<div class="item">当前数量是{{count}} <button @click="add">增加</button></div>
<button @click="asyncAdd">异步操作+10</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.getters.getCount
},
},
methods: {
add() {
this.$store.commit('add', 1)
},
asyncAdd() {
setTimeout(() => {
this.$store.dispatch('asyncAdd', 10)
}, 1000)
},
},
}
</script>
这样就能完成一个简易版的 vuex 了。
详细代码可见 https://github.com/Michael-lzg/vuex-demo
来自:https://github.com/Michael-lzg/my--article/blob/master/vue/谈谈数据状态管理和实现一个简易版vuex.md
在学习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上各种输入
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!