锐客网

  1. 首页 > 睿知 > it技术 > >

#yyds干货盘点#Vuex实战讲解（全），玩转Vue必备知识

IT知识知识实战必备知识

别裁伪体亲风雅，转益多师是汝师。这篇文章主要讲述#yyds干货盘点#Vuex实战讲解（全），玩转Vue必备知识相关的知识，希望能为你提供帮助。


Vuex概况store核心概念

  1. - State：  包含了store中存储的各个状态。
  2. - Getters：  类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。
  3. - Mutation： 一组方法，是改变store中状态的执行者，只能是同步操作。
  4. - Action：  一组方法，其中可以包含异步操作。
  5. - Moudule：  Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。     
vuex辅助函数
在Vuex中获取数据的辅助函数有两个mapState、mapGetters,操作Mutation和acitonhas函数mapMutations、mapActions。
前两个用在computed（计算属性中）
后两个用在methods(方法中)
如何使用多个组件共享同一个状态（数据）
1.安装vuex
新建store文件夹===> index.jsmain.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
【#yyds干货盘点#Vuex实战讲解（全），玩转Vue必备知识】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中的两个参数

// 第一个state,拿数据，第二个参数geters:也就是说可以从getters中调用上面平方根的方法
testGettes(state,getters)
return getters.quadratic

vuex辅助函数辅助函数
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,Mutationsstore下的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< /

    推荐阅读


    上一篇：spring-boot-devtools 快速重启的秘密！#yyds干货盘点#

    下一篇：#yyds干货盘点#函数高级用法递归和高级工具expect等