#yyds干货盘点#Vuex实战讲解(全),玩转Vue必备知识
Posted 前端老实人
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#yyds干货盘点#Vuex实战讲解(全),玩转Vue必备知识相关的知识,希望对你有一定的参考价值。
store核心概念
- - State: 包含了store中存储的各个状态。
- - Getters: 类似于 Vue 中的计算属性,根据其他 getter 或 state 计算返回值。
- - Mutation: 一组方法,是改变store中状态的执行者,只能是同步操作。
- - Action: 一组方法,其中可以包含异步操作。
- - Moudule: Module是store分割的模块,每个模块拥有自己的state、getters、mutations、actions。
vuex辅助函数
在Vuex中获取数据的辅助函数有两个mapState、mapGetters, 操作Mutation和acitonhas函数mapMutations、mapActions。
前两个用在computed(计算属性中)
后两个用在methods(方法中)
如何使用多个组件共享同一个状态(数据)
1.安装vuex
新建store文件夹===>index.js main.js中,导入store对象,并且放在new Vue中 就可以通过this.$store的方式获取到这个store对象
2.使用vuex中的count(state中定义的共享状态)
this.$store.state.count
3.不能直接修改store中的状态,直接修改devtools监听不到数据的修改
4.mutations 负责同步修改状态
Vuex的store修改状态唯一的方式:提交mutations-->(this.$store.commit(add))
Getters Store中的计算属性
// 计算数字的平方
quadratic(state)
// 第一个参数,状态state
return state.count * state.count
![](<> "点击并拖拽以移动")
2.筛选数据
filterInfo(state)
return state.info.filter(res =>
return res.age>18
)
- 获取数据
info:this.$store.getters.filterInf
3.如果想要获取符合条件的个数
- $store.getters.filterInfo.length
4.如果不想年龄晒选写死,想自己输入年龄,只需要在getters里写一个方法
// 筛选数据
filterInfo(state, age)
//要返回一个方法才可以传值
//age返回的不是一个确定的值,而是一个函数
// 1.
// return function(age)
// return state.info.filter(res =>
// return res.age>age
// )
//
// 2.
return (age) => //return后才可以传递参数
return state.info.filter(res => res.age > age)
5.getters中的两个参数
vuex辅助函数
// 第一个state,拿数据,第二个参数geters:也就是说可以从getters中调用上面平方根的方法
testGettes(state,getters)
return getters.quadratic
辅助函数
mapState, 用于将state中的数据映射到组件的计算属性中
<!-- 第一种 -->
<!--
组件中的计算属性名称,和vuex状态名称不一致的时候,可以使用对象写法
-->
computed:mapState(
cnum:"count",
)
<!-- 第二种 -->
<!--
字符串数组写法,
组件中计算属性名,和vuex中状态名一致的时候
-->
computed:mapState([
"count",
])
<!-- 第三种 -->
<!--
当组件有自己的计算属性的时候,我们可以使用结构写法,将辅助函数合并到计算属性中
-->
computed:
mapState(
cnum:"count",
)
![](<> "点击并拖拽以移动")
mapGetters 用于将getter中的计算属性映射到组件的计算属性中用法同mapState
computed:
// 对象展开符,解构mapGetters
mapGetters(
// 将store中的getters的filterInfo,映射到组件上的info计算属性上
info:"filterInfo"
),
mapGetters([ //字符串数组
"getInfoLength"
])
mapMutations : 用于将mutations映射到methods中
mapMutations([
"add"
]),
// 对象写法
mapMutations(
// 同步,通过commit触发mutations
myadd:"add",
// 方法名:mutation函数名
addtwo:"addParms"
),
mapActions :于将actions映射到methods中
mapActions(
// 方法名:mutation函数名
myasync:"asyncAdd"
Vuex中的核心 --- modules
当项目比较大的时候,如果只有一个模块来维护数据,那么这个模块会非常的大,对于维护性来说,不是特别高,所以vuex中,提供模块功能,我们可以通过modules将vuex处理为多个模块
const myCount=
state:
user:
name:admin,
pass:12345
,
count:10
,
getters:
,
mutations:
// 模块的同步中是没有第三参数,(根状态)
cAdd(state,paylaod)
console.log(this)
state.count++
,
actions:
export default new Vuex.Store(
state:
num:2
,
modules: // 模块选项
// 引用myuser模块
u:myUser,
c:myCount,
cat
使用模块的属性
实战解析
$store.state.模块名称.属性名
$store.getters.模块名称.属性名
$store.commit(方法名称)//同步提交
$store.dispatch(方法名称) //异步提
上面概念说完了,该实战练习了,动起来!
State,Mutations
store下的index.js
import Vue from vue
import Vuex from vuex
// 安装插件
Vue.use(Vuex)
export default new Vuex.Store(
state: //存储状态
// 自定义共享状态
count:0,
stu:[
id:1001,name:123,
id:1003,name:符鼠,
id:1004,name:追梦,
],
user:
name:随便,
sex:随机
,
// vuex中的store状态更新的唯一方式是提交Mutation
mutations: //写方法,通过mutations修改、页面的插件才能监听到
add(state)//方法的第一个参数就是state,也就是state的对象
// this是store对象
state.count++
,
//state(store中的state),(Payload:提交方法携带的参数)
addTen(state,ten)//点击加10
state.count += ten
,
addTwo(state,obj)//点击加2,加obj才能接收对象
state.count += obj.two
,
// 向stu数组中添加一条数据
addStu(state,payload)
state.stu.push(payload)//向数组中添加数据
,
updUser(state,age)//给stu对象添加新属性
// state.user.age=18不能写等号
// state.user = ...state.user,age:12
Vue.set(state.user,age,123)
,
actions: ,
modules:
Aone组件
<template>
<div class="hello">
<h1>aone组件</h1>
<h2>$store.state.count</h2>
<li>$store.state.stu</li>
<button @click="addTen">+10</#yyds干货盘点#Vuex中的store#yyds干货盘点#项目实战 <-; DeepSORT算法实现车辆和行人跟踪计数和是否道路违规检测
#yyds干货盘点#MySQL索引优化系列:索引全用及最左法则
11 图 | 硬核讲解 Eureka 增量同步的原理 #yyds干货盘点#