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

Posted 2021-12-14 前端老实人

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.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中的两个参数

// 第一个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,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干货盘点#
 IntelliJ IDEA 下玩转 Git ！#yyds干货盘点#
 #yyds干货盘点# 滚雪球学 Python 之怎么玩转时间和日期库