怎么使用vuex?和vuex的辅助函数

一. vuex的辅助函数

state辅助函数为mapState，actions辅助函数为mapActions，mutations辅助函数为mapMutations。

使用方法：先引入 mapState。mapActions，mapMutations , 在computed 获取

例： 

import {

    mapState

} from 'vuex'

 

computed:{
　　

 ...mapState([
  // 映射 this.name 为 store.state.name
  'name'
])

}

备注（怎么使用vuex 里面会用到哦）

二. 怎么使用vuex ?

1.Npm安装Vuex 

npm i vuex -s

2.首先创建一个store文件夹(和main.js同级)，里面在创建一个index.js

 

 

 3.在main,js 里面引入store文件夹，并且挂载在vue原型上面

 

 

 4.index.js 结构

 

5.操作在页面获取/修改 state的值 （比如name）

①普通获取

computed:{

 　　name () {

            return this.$store.state.name   // 获取姓名

        },

 

}

②辅助函数获取：

先引入 mapState , 在computed 获取

import {

    mapState

} from 'vuex'

 

computed:{
　　

 ...mapState([

  'name'
])

  }


6.。mutations 的用法

修改state 里面的值，不能直接修改，需要mutations 提交。

首先在组件里面触发mutations 方法

 this.$store.commit('updateName','张三') 

 　　state：{

　　　　name: '小孩',

　　　　userInfo: {}, 

       }

mutations：{

      updateName（state,obj）{

          state.name = obj

      }，

    

      updateUserInfo(state,obj){

            state.userInfo = obj

        },

 

}

6.actions 异步操作，直接上例子

actions :{

     // 获取用户信息

        async getUserInfo(state){

            const rsp = await $vue.$http.getUserInfo()

            if(rsp.code != 200) return

            let data = rsp.data || {}

            state.commit('updateUserInfo',data)         //action提交的mutations

        },

}

常用场景，修改用户名和头像组件里面，修改了之后要重新获取用户信息

① 普通触发获取用户信息

  this.$store.dispatch('getUserInfo')     // 获取用户信息

7.getters 的用法

例，如果userInfo里面有一个会员编号1003，我们可以在getters 里面进行匹配，然后返回对应会员类型

  getters:{

       mateCode(state,obj){

              if(state.userInfo.code == '1003' ){

                  state.vipName = '超级会员'

             }

       }

   }

 组件里面普通获取

辅助函数

import {

    mapGetters

} from 'vuex'

   

computed: {

        ...mapGetters(['mateCode'])

    },

 调通 mateCode（）， 如果需要传参，就写在括号里面，getters 里面的mateCode 方法接收的obj 就是页面传的参数。

 

 

 

 

 

 

总结触发mutations 里面的方法 用commit , actions 里面的方法用dispatch .