Vuex常见属性以及组件中调用的几种方法

定义 :vue组件的状态管理模式，存放在vuex里的数据可以在所有的组件当中使用；

vuex的引用

import vuex from 'vuex'

vuex中的核心属性

• state: 用来存放数据的属性.

  state:{
    num : 50, //定义一个num
    title : 400
  }
  

• getters:类似组件中的computed属性，其值受state中的影响，

  getters : {
    //例如写一个总和的函数
      //需要传一个参数，也就是state
    dbNum(state){
          return state.num * 2
      }
  }
  

• mutations : 组件如果想要改变vuex中的数据时，那么vuex提供的改变数据的方法将写在此属性下 ，这里的方法必须是同步的,异步只能改变视图的值

mutations:{
    //state为了获取到数据；
    //payload即是调用该方法时传的参数，可以是个对象
    chanNum(state,payload){
        state.num += payload  //如果传的参数是对象{age:20},payload.age
    }
}

• actions：用于存储异步处理数据的方法，最常见的就是settimeout(),

  actions : {
        //context是一个对象，里面的commit()方法用来调用mutations中的方法
      //解构  let {commit} = context
      asyncChanNum ({commit},payload) {
          settimeout (() =>{
              //注意这里是调用mutations中的函数
              commit("chanNum",payload)
          },5000)
      }
  }
  

vuex的拆分

由于在开发过程当中，要存储的数据很多，所以将其拆分一个个小块

在store中新建一个vuex对应功能的文件夹以及js文件，例如：/store/add/index.js

• 在index.js中导出对象

export default {
    //注意需要一个命名空间为true，不然在组件中调用的时候不能识别，设置可读 
    namespaced:true,
    state : {},
    mutations : {},
    getters:{},
    actions : {},
}

• 在store/index.js中引用

import Vue from 'vue'
import Vuex from 'vuex'
import add from "./add"  //idnex.js可以省略，尽量模块名保持一致
Vue.use(Vuex)
//导出Vuex
export default new Vuex.Store({
    modules : {
        add  //注册模块
    }
})

将vuex模块进一步细化

• 同理，将state mutations getters action 单独放在相应的功能文件夹下面，在index.js中统一导入

  import actions from "./actions";
  import getters from "./getters";
  import mutations from "./mutations";
  import state from "./state";
  export default {
  
    namespaced: true, //设置可读  可以在store中把当前模块文件夹名称（add），当作模块名使用
    state,
    getters,
    mutations,
    actions,
  }
  

vuex的引用

一、普通调用

注意 ：当把vuex一一拆分之后，$store就失去作用了

<template>
    <div>
        <p>{{$store.state.num}}</p>
        <p>
            {{dbNum}}
        </p>
        <button @click="asyncChanNum">  //调用的函数名  ,也可以在此处传参数
            add
        </button>
    </div>
</template>

export default {
    //vuex中的state和getters要写在computed属性中
    //$store是一个对象，用来接受vuex中的属性
    computed:{
        num(){
           return this.$store.state.num
        },
        dbNum(){
         return this.$store.getters.dbNum
        }
    },
    //其余的两个属性在methods中调用或者直接在标签中使用
    methods:{
        chanNum(){
            //注意mutations中函数的调用   commit()
            this.$store.commit("chanNum",{age : 20}) //第一个是vuex中的方法名，第二个要传的实参
        },
        asyncChanNum(){
            this.$store.dispatch("asyncChanNum",{num:50})
        }
    }
}

二、辅助函数

• 在组件中引入模块

  import { mapState, mapMutations,mapGetters,mapActions } from "vuex";

1. 展开数组的方式引用

   <template>
    <div>
           {{num}}
       </div>
       <p>
           {{dbNum}}
       </p>
   </template>
   

   export default {
       computed  :{
           // 数组当中写数据或者函数
           ...mapState(["num",]) ,
           ...mapGetters(["dbNum"])
       },
       methods : {
          //数组中的数据可直接使用胡子语法在模板中使用，也可以用this来调用
           ...mapMutations(["chanNnm"]),
           ...mapActions(["asyncChanNum"])
       }
   }
   

2. 展开对象的方式引用

   export default {
       computed:{
           //写成对象的形式，state中的数据有所不同
           ...mapState({
               num : state => state.num,  //当vue拆分后，state.路径.数据   当时设置namespaced：true就是为了在这里起作用
           }),
       },
       methods :{
           ...mapMutations :({
               chanNum : "chanNum" ,//同理若是拆分后就要在前面加上路径
           })
       }
   }