Vue教程92--Vuex核心概念

Vuex核心概念

• Vuex有几个比较核心的概念:

  • State
  • Getters
  • Mutation
  • Action
  • Module

state

State单一状态树

• Vuex提出使用单一状态树, 什么是单一状态树呢？
  • 英文名称是Single Source of Truth，也可以翻译成单一数据源
• 但是，它是什么呢？我们来看一个生活中的例子
  • OK，我用一个生活中的例子做一个简单的类比
  • 我们知道，在国内我们有很多的信息需要被记录，比如上学时的个人档案，工作后的社保记录公积金记录，结婚后的婚姻信息，以及其他相关的户口、医疗、文凭、房产记录等等（还有很多信息）
  • 这些信息被分散在很多地方进行管理，有一天你需要办某个业务时(比如入户某个城市)，你会发现你需要到各个对应的工作地点去打印、盖章各种资料信息，最后到一个地方提交证明你的信息无误
  • 这种保存信息的方案，不仅仅低效，而且不方便管理，以及日后的维护也是一个庞大的工作
• 这个和我们在应用开发中比较类似：
  • 如果你的状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难
  • 所以Vuex也使用了单一状态树来管理应用层级的全部状态(唯一数据源)
  • 单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护

Getters

Getters基本使用

• 基本使用

   //相当于计算属性
   getters:{
       powerCounter(state){
           return state.counter * state.counter
       }
   }
  

  在App.vue中引入数据

   <h2>-------vuex getters内容--------</h2>
   <p>{{$store.getters.powerCounter}}</p>
  

  效果展示

  

• 有时候，我们需要从store中获取一些state变异后的状态，比如下面的Store中：

   state:{
       counter:0,
       students:[
         {id:100,name:"waws",age:19},
         {id:101,name:"waws1",age:69},
         {id:102,name:"waws2",age:39},
         {id:103,name:"waws3",age:9},
         {id:104,name:"waws4",age:20}
       ]
     },
  

  • 我们可以在Store中定义getters:获取学生年龄大于20的个数

   getters:{
       powerCounter(state){
           return state.counter * state.counter
       },
       greaterAgesCount:state=>{
           return state.students.filter(s=>s.age > 20).length
       }
   }
  

  

Getters作为参数和传递参数

• 如果我们已经有了一个获取所有年龄大于20岁学生列表的getters, 那么代码可以这样来写

   getters:{
       powerCounter(state){
           return state.counter * state.counter
       },
       greaterAgesthan20Element:state=>{
           return state.students.filter(s=>s.age > 20)
       },
       // 将getters作为参数向另一个getters函数中进行传递
       greaterAgesthan20ElementLength:(state,getters)=>{
           return getters.greaterAgesthan20Element.length
       }
   }
  

  App.vue

   <h2>-------vuex getters内容--------</h2>
   <p>{{$store.getters.powerCounter}}</p>
   <p>{{$store.getters.greaterAgesthan20Element}}</p>
   <p>{{$store.getters.greaterAgesthan20ElementLength}}</p>
  

  

• getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数

  • 自定义年龄，过滤年龄在age之上的学生

     //传递参数其实就是返回一个函数
     zidingyimorethan20(state){
         return function (age){
             return state.students.filter(s => s.age > age)        
         }
     }
    

    App.vue

     <p>{{$store.getters.zidingyimorethan20(40)}}</p>