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

飞奔的炮台

Vuex概况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.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}}
  

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</button>  <button @click="addStu">添加成员</button>  </div></template><script>export default {  name: 'aone',  props: {  msg: String,  count:Number  },  data() {  return {    stu:{id:1005,name:'测试'}  }  },  methods: {  addTen(){    // 触发mutations函数，指定额外参数,字符串方式提交    this.$store.commit('addTen',10)    },  addStu(){    this.$store.commit('addStu',this.stu)  }  },}</script

hello组件

<template>  <div class="hello">  <h1>helloworld组件</h1>  <h2>{{$store.state.count}}</h2>  <h2>{{$store.state.user}}</h2>  <button @click="addTwo">点击加2</button>  <button @click="updUser">修改</button>  </div></template><script>export default {  name: 'HelloWorld',  props: {  msg: String,  count:Number  },  methods: {  addTwo(){    // 触发mutations函数，指定额外参数,对象形式提交    this.$store.commit({    type:'addTwo',    two:2    })    },  updUser(){    // 触发mutations函数，指定额外参数    this.$store.commit({    type:'updUser' })  }  },}</script

Actions,Getters
store下的index.js

import Vue from 'vue'import Vuex from 'vuex'// 安装插件Vue.use(Vuex)// 实例化vuex并导出export default new Vuex.Store({  state: {  count: 0,  info: [    {    di: 1, name: '开发者1', age: 21    },    {    di: 2, name: '开发者2', age: 22    },    {    di: 3, name: '开发者3', age: 23    },  ]  },  // 只能通过mutations更改数据  mutations: {//如果mutation是一个异步函数，那么devtools不能跟踪数据变化  // mutations负责同步修改状态  increment(state, payload) {    //   setTimeout(()=>{    state.count += payload    //   },2000)  }  },  // 专写异步actions  actions: {//context上下文对象  asyncIcrement(context, payload) {    setTimeout(() => {    context.commit('increment', payload)    }, 2000)  }  },  getters: {//store的计算属性  // 计算数字的平方  quadratic(state) {    // 第一个参数，状态state    return state.count * state.count  },  // 筛选数据  filterInfo(state, age) {    //要返回一个方法才可以传值    //age返回的不是一个确定的值，而是一个函数    // return function(age){    //   return state.info.filter(res =>{    //   return res.age>age    //   })    // }    return (age) => {//return后才可以传递参数    return state.info.filter(res => res.age > age)    }  },  testGettes(state,getters){    // 调用上面平方根的方法    return getters.quadratic  }  },  modules: {  }}

myvux组件

<template>  <div id="main">  <h2>这是myvue组件</h2>  <h3>{{$store.state.count}}</h3>  <button @click="add">+1</button>  <button @click="asyAdd">异步+1</button>  <h2>获取年龄小于22的开发</h2>  </div></template><script>export default {  methods: {  add(){    this.$store.commit('increment',5)  },  asyAdd(){    // 触发actions异步并传参    this.$store.dispatch('asyncIcrement',10)  }  },}</script

myhome组件

<template>  <div id="home">  <h2>这是home组件</h2>  <h3>{{$store.state.count}}</h3>  <h3>平方：{{$store.getters.quadratic}}</h3>  <!-- 通过getters来筛选数据 -->  <div>    <h3>获取大于22的</h3>     <li v-for="itme in info">    {{itme}}    </li>    <!-- {{$store.getters.filterInfo.length}} -->    //调用上面函数    <h5>{{$store.getters.testGettes}}</h5>  </div>  </div></template><script>export default {  data() {  return {    info:this.$store.getters.filterInfo(22)  }  },}</script

辅助函数及Modules
store下的index.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({  state: {  count:0,  user:{    name:'admin',    pass:'123'  },  info: [    {    di: 1, name: '开发者1', age: 21    },    {    di: 2, name: '开发者2', age: 22    },  ]  },  getters:{  filterInfo(state){    // 过滤大于20的数据    return state.info.filter(info=>info.age>22)  },  getInfoLeng(state,getter){    return getter.filterInfo.length  }  },  mutations: {  add(state){    this.count ++  },  addParms(state,num){    this.count += num  }  },  actions: {  //异步  asyncAdd(context){    setTimeout(()=>{    context.commit('add')    },2000)  }  },  modules: {  }}

Mystate组件（mapstate对应state）

<template>  <div id="mystate">  <!-- 使用vuex中的count -->  <p>数字：{{ $store.state.count }}</p>  <!-- <p>数字data：{{num}}</p> -->  <!-- <p>计算属性中的数字：{{cnum}}</p> -->  <!-- vuex中的数据 -->  <!-- <p>mapstate:{{count}}</p>  <p>mapstate:{{user}}</p> -->  <p>cuser:{{ cuser }}</p>  <p>cuser:{{ csuser }}</p>  <p>cnum:{{ cnum }}</p>  <p>组件自己的计算属性：{{ cPrice }}</p>  </div></template><script>import {mapState} from 'vuex'// console.log(mapState); export default {  data() {  return {    // 在data中定义不是响应式    num:this.$store.state.count,    price:10  }  },  // 计算属性  // computed:{  //   cnum(){  //   return this.$store.state.count  //   }  // }  // 通过mapState辅助函数，帮我们自动生成计算属性  // computed:mapState([//字符串数组写法  // // 属性名和vuex状态名相同可以使用数组的形式写  //   'count',//将vuex中状态count映射到计算属性中  //   'user'  // ])  // 以对象形式使用  // computed:mapState({  //   cuser(state){  //   // 通过计算属性的第一个函数，是vuex中的状态state,所以可以通过state直接获取数据  //   return state.user//this.$store.user  //   },  //   // 简写方式  //   csuser:state => state.user,  //   // 等价于tate => state.count  //   cnum:'count'  // })  computed:{  //组件自己的计算属性  cPrice(){    return '$'+this.price  },  //通过mapState映射过来的计算属性  ...mapState({  cuser(state){    // 通过计算属性的第一个函数，是vuex中的状态state,所以可以通过state直接获取数据    return state.user//this.$store.user  },  // 简写方式  csuser:state => state.user,  // 等价于tate => state.count  cnum:'count'  })  }}</script

Mygetter组件(mapgetters对应getters)

<template>  <div id="mygetter">  <h3>mapgetter用法</h3>  <p>直接使用getters:{{$store.getters.filterInfo}}</p>  <p>mapgetters:{{info}}</p>  <p>获取长度(info)：{{getInfoLeng}}</p>  </div></template><script>// 获取辅助函数import { mapGetters, mapState } from "vuex";// console.log(mapState);export default {  computed: {  // 对象展开符解构mapgetters  ...mapGetters({//对象写法    // 将store中的getters的filterInfo映射到组件上的info计算属性上    info:'filterInfo'  }),  ...mapGetters([//字符串数组写法    'getInfoLeng'  ])  },};</script

mymutations组件（mapmutations对应mutations）

<template>  <div id="mymutations">  <h3>使用mapmutions和mapactions</h3>  <button @click="add">触发add</button>  <button @click="myadd">触发myadd</button>  <!-- 传参 -->  <button @click="addtwo(3)">+3</button>  <button @click="myasync">触发异步</button>  </div></template><script>// 获取辅助函数import {mapState,mapGetters,mapMutations,mapActions} from 'vuex';export default {  // 计算属性  computed:{   },  // 放方法  methods: {  // 为了触发mutation函数 定义的方法没必要这么写  // clickAdd(){  //   this.$store.commit('add')  // }  //触发异步  myasync(){    this.$store.dispantch('asyncAdd')  },  // 字符串数组的用法  ...mapMutations([    'add'  ]),  // 对象写法  ...mapMutations({    // 同步方法通过commit触发mutauions    myadd:'add',    // 方法名：mutation函数名    addtwo:'addParms'  }),  //异步  ...mapActions({    myasync:'asyncAdd'  })  },}</script

Modules模块的使用

<script>//vuex文件import Vue from 'vue'import Vuex from 'vuex'import myUser from './myuser'import cat from './cat'Vue.use(Vuex)// const myUser={ // } export default new Vuex.Store({  modules: {//模块选项  // 引入  u:myUser,  cat  }})</script>-----------------------------------------------------------下面是展示页面<template>  <div class="modules">  <!-- 多了一层u -->  <h4>user信息：{{$store.state.u.user}}</h4>  <h4>cat信息：{{$store.state.cat.mycat}}</h4>  </div></template

结尾如果对您有帮助，希望能给个