8.3.1 Vuex 状态管理

最新推荐文章于 2024-05-27 18:56:18 发布

w1fl1w

最新推荐文章于 2024-05-27 18:56:18 发布

阅读量188

点赞数

分类专栏： vue.js 前端文章标签： javascript vue

本文链接：https://blog.csdn.net/w1fl1w/article/details/108769288

版权

前端同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue.js

18 篇文章 0 订阅

订阅专栏

本文为拉勾网大前端高薪训练营第一期笔记

组件内的状态管理流程

Vue 最核心的两个功能:数据驱动和组件化。
组件化开发给我们带来了:

更快的开发效率
更好的可维护性

每个组件都有自己的状态、视图和行为等组成部分。

new Vue({
  // state
  data() {
    return {
      count: 0
    }
  },
  // view
  template: `
	  <div>{{ count }}</div>
	`,
  // actions 
  methods: {
    increment() {
      this.count++
    }
  }
})

状态管理包含以下几部分:

state，驱动应用的数据源;
view，以声明方式将 state 映射到视图;
actions，响应在 view 上的用户输入导致的状态变化。

在这里插入图片描述

组件间通信方式

三种组件间通信方式

父组件给子组件传值
- 子组件中通过props接收数据
- 父组件中给子组件通过相应属性传值

//parent
<template>
  <div>
    <h1>Props Down Parent</h1>
    <child title="My journey with Vue"></child>
  </div>
</template>

<script>
import child from './01-Child'
export default {
  components: {
    child
  }
}
</script>

//child
<template>
  <div>
    <h1>Props Down Child</h1>
    <h2>{{ title }}</h2>
  </div>
</template>

<script>
export default {
  // props: ['title'],
  props: {
    title: String    //用对象形式可以限制传递的类型
  }
}
</script>

子组件给父组件传值
- 通过监听子组件事件，从子组件传值
- 核心：
  - 子组件this.$emit(‘enlargeText’, 0.1)
  - 父组件v-on:enlargeText="enlargeText"或者v-on:enlargeText=“hFontSize += $event”

//parent
<template>
  <div>
    <h1 :style="{ fontSize: hFontSize + 'em'}">Event Up Parent</h1>

    这里的文字不需要变化

    <child :fontSize="hFontSize" v-on:enlargeText="enlargeText"></child>
    <child :fontSize="hFontSize" v-on:enlargeText="enlargeText"></child>
    <child :fontSize="hFontSize" v-on:enlargeText="hFontSize += $event"></child>
  </div>
</template>

<script>
import child from './02-Child'
export default {
  components: {
    child
  },
  data () {
    return {
      hFontSize: 1
    }
  },
  methods: {
    enlargeText (size) {
      this.hFontSize += size
    }
  }
}
</script>

//child
<template>
  <div>
    <h1 :style="{ fontSize: fontSize + 'em' }">Props Down Child</h1>
    <button @click="handler">文字增大</button>
  </div>
</template>

<script>
export default {
  props: {
    fontSize: Number
  },
  methods: {
    handler () {
      this.$emit('enlargeText', 0.1)
    }
  }
}
</script>

不相关组件之间传值
- 通过一个新Vue实例当eventBus

//sender
import bus from './eventbus'
methods: {
  sub () {
    if (this.value > 1) {
      this.value--
      bus.$emit('numchange', this.value)
    }
  },
  add () {
    this.value++
    bus.$emit('numchange', this.value)
  }
}

//receiver
import bus from './eventbus'
bus.$on('numchange', (value) => {
  this.msg = `您选择了${value}件商品`
})

//eventbus.js
import Vue from 'vue'
export default new Vue()

ref两个作用

如果你把它作用到普通 HTML 标签上，则获取到的是 DOM
如果你把它作用到组件标签上，则获取到的是组件实例

//child
<template>
  <input ref="input" type="text" v-model="value">
</template>
<script>
  export default {
		data: {
			value: ''
		}
    methods: {
	// 用来从父级组件聚焦输入框 focus: function () {
	this.$refs.input.focus() }
	} }
</script>

//parent
<base-input ref="usernameInput"></base-input>

mounted () { 
	this.$refs.usernameInput.focus()
	this.$refs.usernameInput.value = "hello input"
}

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs 。

简易的状态管理方案

如果多个组件之间要共享状态(数据)，使用上面的方式虽然可以实现，但是比较麻烦，而且多个组件之间互相传值很难跟踪数据的变化，如果出现问题很难定位问题。

当遇到多个组件需要共享状态的时候，典型的场景:购物车。我们如果使用上述的方案都不合适，我们会遇到以下的问题

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢?在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为!

我们可以把多个组件的状态，或者整个程序的状态放到一个集中的位置存储，并且可以检测到数据的更改。你可能已经想到了 Vuex。

这里我们先以一种简单的方式来实现

首先创建一个共享的仓库 store 对象

export default {
  debug: true,
  state: {
	user: {
	name: 'xiaomao', age: 18,
	sex: '男'
	} },
	setUserNameAction (name) { if (this.debug) {
	console.log('setUserNameAction triggered:', name) }
	this.state.user.name = name }
}

把共享的仓库 store 对象，存储到需要共享状态的组件的 data 中

import store from './store' 
export default {
	methods: {
		// 点击按钮的时候通过 action 修改状态 change () {
		store.setUserNameAction('componentB') }
	},
	data () {
		return {
			privateState: {}, sharedState: store.state
		} 
	}
}

接着我们继续延伸约定，组件不允许直接变更属于 store 对象的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变，这样最终的样子跟 Vuex 的结构就类似了。这样约定的好处是，我们能够记录所有 store 中发生的 state 变更，同时实现能做到记录变更、保存状态快照、历史回滚/时光旅行的先进的调试工具。

Vuex 回顾

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

Vuex 是专门为 Vue.js 设计的状态管理库
它采用集中式的方式存储需要共享的数据
从使用角度，它就是一个 JavaScript 库
它的作用是进行状态管理，解决复杂组件通信，数据共享

什么情况下使用 Vuex

官方文档:

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是:Flux 架构就像眼镜:您自会知道什么时候需要它。

当你的应用中具有以下需求场景的时候:

多个视图依赖于同一状态
来自不同视图的行为需要变更同一状态

建议符合这种场景的业务使用 Vuex 来进行数据管理，例如非常典型的场景:购物车。

注意:Vuex 不要滥用，不符合以上需求的业务不要使用，反而会让你的应用变得更麻烦。

Vuex核心概念回顾

在这里插入图片描述

Store: 每一个应用包含一个store，里面有state
State:提供一个响应式数据
Getter:借助Vue的计算属性computed来实现缓存
Mutation:更改state方法
Action:触发mutation 方法
Module:将store分割成模块，以免store变得臃肿

示例演示
基本结构

导入 Vuex
注册 Vuex
注入 $store 到 Vue 实例

State

Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。
使用 mapState 简化 State 在视图中的使用，mapState 返回计算属性
mapState 有两种使用的方式:

接收数组参数

// 该方法是 vuex 提供的，所以使用前要先导入 
import { mapState } from 'vuex'
// mapState 返回名称为 count 和 msg 的计算属性 
// 在模板中直接使用 count 和 msg
//之前需要{{$store.state.count}}
//此时只需要{{count}}
computed: {
	...mapState(['count', 'msg']), 
}

接收对象参数

如果当前视图中已经有了 count 和 msg，如果使用上述方式的话会有命名冲突，解决的方式:

// 该方法是 vuex 提供的，所以使用前要先导入 
import { mapState } from 'vuex'
// 通过传入对象，可以重命名返回的计算属性
// 在模板中直接使用 num 和 message 
computed: {
	...mapState({
		num: state => state.count, message: state => state.msg,
		//或者
		//num: 'count', message: 'msg'
	}) 
}

Getter

Getter 就是 store 中的计算属性，使用 mapGetter 简化视图中的使用

import { mapGetter } from 'vuex'

//麻烦的写法{{$store.getters.reverseMsg}}
//{{reverseMsg}}
{{reverse}}
computed: { 
	//...mapGetter(['reverseMsg']), 
	// 改名，在模板中使用 reverse 
	...mapGetter({
    reverse: 'reverseMsg'
  })
}

//App.vue
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
	state: {
    count: 0,
    msg: 'Hello Vuex'
  },
  getter: {
    reverseMsg(state) {
      return state.msg.split('').reverse().join('')
    }
  },
  mutations:{},
  actions:{},
  modules:{}
})

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

使用 Mutation 改变状态的好处是，集中的一个位置对状态修改，不管在什么地方修改，都可以追踪到状态的修改。可以实现高级的 time-travel 调试功能

mutation需要commit

import { mapMutations } from 'vuex'

<button @click="$store.commit('increase', 2)">increase</button>

methods: { 
	...mapMutations(['increase']), 
	// 传对象解决重名的问题 
	...mapMutations({
    increaseMut: 'increase'
  })
}

mutations: {
	increase(state, payload) {
		state.count += payload
	}
}

chrome调试工具可以观测状态变化，也可以time travel跳到某次mutation看状态

不要再mutation执行异步操作，否则调试工具会无法正常观测状态变化

Action

Action 类似于 mutation，不同在于:

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

action需要dispatch

import { mapActions } from 'vuex'
<button @click="$store.dispatch('increaseAsync', 2)">increase</button>
<button @click="increaseAsync(2)">increase</button>
methods: { 
  ...mapActions(['increaseAsync']), 
  // 传对象解决重名的问题 
  ...mapActions({
    increaseAction: 'increaseAsync'
  })
}

actions: {
	increaseAsync(context, payload) {
		setTimeout(()=>{
			context.commit('increase', payload)
		}, 2000)
	}
}

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间——这样使得多个模块能够对同一 mutation 或 action 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

getters['account/isAdmin']
dispatch('account/login')
commit('account/login')

//products.js
const state = {
  products: [
    { id: 1, title: 'iPhone 11', price: 8000 },
    { id: 2, title: 'iPhone 12', price: 10000 }
  ]
}
const getters = {}
const mutations = {
  setProducts (state, payload) {
    state.products = payload
  }
}
const actions = {}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

<!-- {{$store.state.products.products}}
<button @click="$store.commit('setProducts, [])">Mutation</button> -->
{{products}}
<button @click="setProducts([])">Mutation</button>
//开启命名空间后
computed: {
	...mapState('products', ['products'])
},
methods: {
	...mapMutations('products', ['setProducts'])
}

严格模式

new Vuex.Store({
	strict: process.env.NODE_ENV !== 'production'
})

然后$store.state.msg = ‘123’ 会警告，不能绕过mutation对store里的state进行修改

开发模式才开启strict，不要在生产模式启用

严格模式会深度检查状态树，检查不合规的状态改变，影响性能

购物车案例

接下来我们通过一个购物车案例来演示 Vuex 在项目中的使用方式

功能列表

商品列表组件
商品列表中弹出框组件
购物车列表组件

商品列表

商品列表功能

Vuex 中创建两个模块，分别用来记录商品列表和购物车的状态，store 的结构:
- store
  - modules
    - cart.js
    - products.js
  - index.js

products模块

const getters = {}
const mutations = {
  setAllProducts (state, products) {
    state.products = products
  }
}
const actions = {
  async getAllProducts ({ commit }) {
    const { data } = await axios({
      method: 'GET',
      url: 'http://127.0.0.1:3000/products'
    })
    commit('setAllProducts', data)
  }
}
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

store/index.js 中注册 products.js 模块
views/products.vue 中实现商品列表的功能

import { mapState, mapActions } from 'vuex'
export default {
  name: 'ProductList',
  computed: {
		...mapState('products', ['products']) 
	},
	methods: {
		...mapActions('products', ['getAllProducts'])
  },
  created () {
		this.getAllProducts() 
	}
}

添加购物车

cart 模块实现添加购物车功能，store/modules/cart.js

const mutations = {
  addToCart (state, product) {
    // 判断 cartProducts 中是否已有该商品
    // 如果有的话，把 product 添加到数组中，设置 count=1, isChecked=true, totalPrice
    // 否则的话找到购物车中的商品让 count + 1
    const prod = state.cartProducts.find(item => item.id === product.id)
    if (prod) {
      prod.count++
      prod.isChecked = true
      prod.totalPrice = prod.price * prod.count
    } else {
      state.cartProducts.push({
        // { id, title, price } ...product,
        totalPrice: product.price,
        count: 1,
        isChecked: true
      })
    }
  }
}

store/index.js 中注册 cart 模块
view/products.vue 中实现添加购物车功能

<!-- 修改模板 -->
<!-- vue 2.6之前 -->
<!-- <template slot-scope="scope"> -->
<!-- vue 2.6以后 -->
<template v-slot="scope">
	<el-button @click="addToCart(scope.row)">加入购物车</el-button> 
</template>
<!-- 映射 cart 中的 mutations --> 
...mapMutations('cart', ['addToCart']),

商品列表 - 弹出购物车窗口

购物车列表

components/pop-cart.vue 中展示购物车列表

import { mapState } from 'vuex'
export default {
  name: 'PopCart',
  computed: {
		...mapState('cart', ['cartProducts']) 
	}
}

删除

cart 模块实现从购物车删除的功能，store/modules/cart.js

// mutations 中添加 
deleteFromCart (state, prodId) {
	const index = state.cartProducts.find(item => item.id === prodId)
	index !== -1 && state.cartProducts.splice(index, 1) 
}

components/pop-cart.vue 中实现删除功能

<template slot-scope="scope"> 
	<el-button
		@click="deleteFromCart(scope.row.id)"
		size="mini" 
	>删除</el-button>
</template>

methods: {
	...mapMutations('cart', ['deleteFromCart'])
}

小计

cart 模块实现统计总数和总价，store/modules/cart.js

const getters = {
  totalCount (state) {
    return state.cartProducts.reduce((count, prod) => {
      return count + prod.count
    }, 0)
  },
  totalPrice (state) {
    return state.cartProducts
      .reduce((count, prod) => {
        return count + prod.totalPrice
      }, 0)
      .toFixed(2)
  }
}

components/pop-cart.vue 中显示徽章和小计

<div>
	<p>共 {{ totalCount }} 件商品 共计¥{{ totalPrice }}</p>
	<el-button size="mini" type="danger" @click="$router.push({ name: 'cart' })">
	去购物车</el-button>
</div>
<el-badge :value="totalCount" class="item" slot="reference">
<el-button type="primary">我的购物车</el-button> </el-badge>

computed: {
	...mapState('cart', ['cartProducts']), 
	...mapGetters('cart', ['totalCount', 'totalPrice'])
},

购物车

购物车列表

省略…

全选功能

cart 模块实现更新商品的选中状态，store/modules/cart.js

// 更新所有商品的选中状态(点击全选) 
updateAllProductsChecked (state, checked) { 
    state.cartProducts.forEach(prod => {
    prod.isChecked = checked })
},
// 更新某个商品的选中状态(点击单个商品) 
updateProductChecked (state, {
    prodId,
    checked
}) {
    const prod = state.cartProducts.find(prod => prod.id === prodId) 
    prod && (prod.isChecked = checked)
}

views/cart.vue，实现全选功能

//父勾选框
<el-checkbox v-model="checkedAll" size="mini">
</el-checkbox>

computed: {
	checkedAll: {
		get() {
			return this.cartProducts.every(prod => prod.isChecked)
		},
		set(value) {
			this.updateAllProductsChecked(value)
		}
	}
}

//子勾选框
<!--
@change="updateProductChecked" 默认参数:更新后的值 
@change="updateProductChecked(productId, $event)",
当你传递了自定义参数的时候，还想得到原来那个默认参数，就手动传递一个 $event 
-->
<template v-slot="scope">
	<el-checkbox
		size="mini"
		:value="scope.row.isChecked"
		@change="updateProductChecked({
			prodId: scope.row.id,
			checked: $event
		})"
	>
	</el-checkbox>
</template>

methods: { 
	...mapMutations('cart', [
    'updateAllProductsChecked',
    'updateProductChecked'
	])
}

数字文本框

cart 模块实现更新商品数量，store/modules/cart.js

updateProductCount (state, { prodId, count }) {
  const prod = state.cartProducts.find(prod => prod.id === prodId)
  if (prod) {
    prod.count = count
    prod.totalPrice = prod.price * count
  }
}

views/cart.vue，实现数字文本框功能

<template slot-scope="scope"> 
<el-input-number
	size="mini"
	:min="1"
	controls-position="right" 
	:value="scope.row.count" 
	@change="updateProductCount({
		prodId: scope.row.id, 
		count: $event
	})"
></el-input-number>
</template>

...mapMutations('cart', [ 
	'updateAllProductsChecked',
	'updateProductChecked', 
	'updateProductCount'
])

小计

cart 模块实现统计选中商品价格和数量，store/modules/cart.js

checkedTotalCount (state) {
  return state.cartProducts.reduce((count, prod) => {
    if (prod.isChecked) {
      count += prod.count
    }
    return count
  }, 0)
},
checkedTotalPrice (state) {
  return state.cartProducts
    .reduce((count, prod) => {
      if (prod.isChecked) {
        count += prod.totalPrice
      }
      return count
    }, 0)
    .toFixed(2)
}

views/cart.vue，实现小计

<p>已选 <span>{{ checkedTotalCount }}</span> 件商品，总价:<span>{{ 
checkedTotalPrice }}</span></p>

...mapGetters('cart', ['checkedTotalCount', 'checkedTotalPrice'])

本地存储

使用Vuex插件，在订阅mutation，在mutation之后执行

插件介绍

Vuex的插件就是一个函数
这个函数接收一个store的参数

const myPlugin = store => {
	store.subscribe((mutation, state)=> {
		//每次mutation之后调用
		//mutation的格式为{type, payload}
		if(mutation.type.startsWith('cart/')){
			window.localStorage.setItem('cart-products', 
				JSON.stringify(state.cart.cartProducts))
		}
	})
}

export default new Vuex.Store({
	plugins: [myPlugin]
})

//debug mutation
{
	payload: {__ob__: Observer}
	type: "cart/addToCart"
}

Vuex模拟实现

回顾基础示例，自己模拟实现一个 Vuex 实现同样的功能

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0,
    msg: 'Hello World'
  },
  getters: {
    reverseMsg (state) {
      return state.msg
        .split('')
        .reverse()
        .join('')
    }
  },
  mutations: {
    increate (state, payload) {
      state.count += payload.num
    }
  },
  actions: {
    increate (context, payload) {
      setTimeout(() => {
        context.commit('increate', { num: 5 })
      }, 2000)
    }
  }
})

实现思路

实现 install 方法
- Vuex 是 Vue 的一个插件，所以和模拟 VueRouter 类似，先实现 Vue 插件约定的 install 方法
实现 Store 类
- 实现构造函数，接收 options
- state 的响应化处理
- getter 的实现
- commit、dispatch 方法

install 方法

let _Vue = null
function install (Vue) {
  _Vue = Vue
  _Vue.mixin({
    beforeCreate () {
      if (this.$options.store) {
        Vue.prototype.$store = this.$options.store
      }
    }
  })
}

Store 类

class Store {
  constructor (options) {
    const { state = {}, getters = {}, mutations = {}, actions = {} } = options
    this.state = _Vue.observable(state)
    // 此处不直接 this.getters = getters，是因为下面的代码中要方法 getters 中的 key
    // 如果这么写的话，会导致 this.getters 和 getters 指向同一个对象
    // 当访问 getters 的 key 的时候，实际上就是访问 this.getters 的 key 会触发 key 属性 的 getter
    // 会产生死递归
    this.getters = Object.create(null)
    Object.keys(getters).forEach(key => {
      Object.defineProperty(this.getters, key, {
        get: () => getters[key](this.state)
      })
    })
    this.mutations = mutations
    this.actions = actions
  }
  commit (type, payload) {
    this.mutations[type](this.state, payload)
  }
  dispatch (type, payload) {
    this.actions[type](this, payload)
  }
}
// 导出模块
export default {
  Store,
  install
}

使用自己实现的 Vuex

src/store/index.js 中修改导入 Vuex 的路径，测试

import Vuex from '../myvuex' // 注册插件
Vue.use(Vuex)

w1fl1w

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.3.1 Vuex 状态管理

本文为拉勾网大前端高薪训练营第一期笔记组件内的状态管理流程Vue 最核心的两个功能:数据驱动和组件化。组件化开发给我们带来了:更快的开发效率更好的可维护性每个组件都有自己的状态、视图和行为等组成部分。new Vue({ // state data() { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // action
复制链接

扫一扫

专栏目录