基于vue+ts的vuex五个属性基础用法

梦里梦外; 2023-01-05 09:49 152阅读 0赞

## 什么是Vuex ##

> VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(可以理解为 vue 组件里的某些 data )。  
> 它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。  
> Vue有五个核心概念，state, getters, mutations, actions, modules。

## 1. state ##

state是Vuex的基本数据，用来存储变量  
**定义**

export default new Vuex.Store({ 
      state: { 
        count:1,
        students:[
          { id:110,name:"zhou",age:18},
          { id:111,name:"ti",age:25},
          { id:112,name:"qi",age:21},
          { id:113,name:"stu",age:19}
        ]
      }
      })

**调用**

//通过调用$store.state来输出需要的变量
      <h2>store的值:{ { $store.state.count}}</h2>
      <h3 v-for="item in $store.state.students" :key="item.id">
         <h4>id:{ { item.id}},姓名:{ { item.name}},年龄：{ { item.age}}</h4>
     </h3>

## 2. getters ##

从基本数据(state)派生的数据，相当于state的计算属性，在index.ts（js）中在getters模块中定义计算属性，在页面中通过$store.getters.计算属性名字进行调用  
**定义**

getters:{ 
        //计算属性
        getMyName(state){ 
        //state参数是固定的，是指获取state的值
          return state.myName+"我是计算属性啊"
        },
        more20stu(state){ 
          return state.students.filter(s=>s.age>20)
        },
        moreAgeStu(state){ 
        //通过返回一个方法来接收页面传来的参数
          return function(age:any){ 
          //调用数组的新特性filter，filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            return state.students.filter(s=>s.age>age)
          }
        }
      }

**调用**

<div>
          <h2>vue计算属性</h2>
          <h3>获取计算属性的getMyName的值:{ { $store.getters.getMyName}}</h3>
          <h3>通过vuex的getters获取state的学生大于20岁的对象为：
            { { $store.getters.more20stu}}
          </h3>
          <h3>
            给计算属性传值需要返回一个方法接收:
            { { $store.getters.moreAgeStu(22)}}
          </h3>
        </div>

## 3.mutations ##

mutations是提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。在 mutations定义操作state变量，在页面展示的方法中通过this.$store.commit()调用mutations里的方法，进行操作state。  
**定义**

mutations: { 
        // this.$store.commit('increment')
        increment(state){ 
          state.count++;
        },
        incrementCount(state,count:any){ 
           state.count+=count;
        },
        decrement(state){ 
          state.count--;
        }
      }

**调用**

//在template中
        <h2>store的值:{ { $store.state.count}}
          <h3 v-for="item in $store.state.students" :key="item.id">
              <h4>id:{ { item.id}},姓名:{ { item.name}},年龄：{ { item.age}}</h4>
          </h3>
        <button @click="addtion">+</button>
        <button @click="subtion">-</button>
        <button @click="addCount(5)">+5</button>
        <button @click="addCount(10)">+10</button>
      </h2>
    //在<script lang="ts">中
    	  $store: any;
    	  addtion(){ 
    	    this.$store.commit('increment')
    	  }
    	  addCount(count:any){ 
    	  //'incrementCount需要请求mutations的方法名，count传递的参数
    	    this.$store.commit('incrementCount',count)
    	  }
    	  subtion(){ 
    	    this.$store.commit('decrement')
    	  }

## 4.actions ##

**action 相似于 mutation，但是用来代替Mutation进行异步操作的函数**  
**定义**

actions: { 
        updateName(context,payload){ 
          setTimeout(()=>{ 
            context.commit('updateNameInfo',payload)
          },1000)
        },
        promiseUpdateName(context,payload){ 
          return new Promise((resolve,reject)=>{ 
            setTimeout(()=>{ 
              context.commit('updateNameInfo',payload);
              resolve('成功修改');
            },1000)
          })
        }
      }

**调用**

//template
       <div>
         <h1>-----------------actions-------------</h1>
           <h2>(1)通过action修改name：{ { $store.state.name}}
           <button @click="updateName">确定修改</button>
           <button @click="promiseUpdateName">promise回调修改</button>
         </h2>
       </div>
    //在<script lang="ts">中
    	updateName(){ 
    	 this.$store.dispatch('updateName','我是action');
    	}
    	promiseUpdateName(){ 
    	 this.$store.dispatch('promiseUpdateName','我是携带的信息')
    	 .then((res:any)=>{ 
    	   alert("action已经提交修改,并返回的参数为："+res)
    	 });
    	}

## 5.modules ##

module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。在module模块中，五大属性（state，getters，mutations等等）用法差不多根store的五法属性用法差不多。区别就是换地方存储操作数据。方便管理  
**定义**

const moduleA={ 
      state:{ 
        moduleName:"moduleA"
      },
      mutations:{ 
        updateModuleAName(state:any,payload:any){ 
           state.moduleName=payload;
        }
      },
      actions:{ },
      getters:{ 
        fullName(state:any){ 
          return state.moduleName+",我是moduleA的计算属性"
        },
        fullName1(state:any,getters:any){ 
        //
          return "通过getters参数获取计算属性的值:"+getters.fullName
        },
        fullName2(state:any,getters:any,rootState:any){ 
          return "通过rootStare获取根state里的值:"+rootState.name;
        }
      }
    }
    const moduleB = { 
     state: {  ... },
     mutations: {  ... },
     actions: {  ... }
     }
     
    const store = new Vuex.Store({ 
     modules: { 
      a: moduleA,
      b: moduleB})

**调用**

//template
       <div>
         <h1>-----------------modules-------------</h1>
           <h2>moduleName:{ { $store.state.a.moduleName}}</h2>
           <button @click="updateModuleName">修改module名字</button>
           <h2>modules的计算属性1：{ { $store.getters.fullName1}}</h2>
           <h2>modules的计算属性2：{ { $store.getters.fullName2}}</h2>
       </div>
    //在<script lang="ts">中 
       updateModuleName(){ 
       this.$store.commit('updateModuleAName','moduleA被 修改了')
    }