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

什么是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被 修改了')
}