vuex有哪几种属性？

五种种属性：state、getters、mutations、actions、modules

• state、getters、mutations、actions、modules这五个属性,以如下三行代码来开始进行解释

// 同步赋值操作： 触发mutations中的handleUserLimit方法，从而改变state中的user_limit的值
this.$store.commit('handleUserLimit','1');
// 同步赋值操作：触发mutations中的handlesearchPhone方法，从而改变state中的search_phone的值
this.$store.commit('handlesearchPhone','17777777777');  
// 异步赋值操作
this.$store.dispatch("setUserInfo", JSON.stringify({name:'coderZb',sex:'1'}));              

1、state

state ： 数据源（相当于数据库）

state: {
 user_limit: '' || localStorage.getItem('user_limit'),
 search_phone: '' || localStorage.getItem('search_phone'),
 user_info:'' || localStorage.getItem('userInfo'),
},

---

2、getters

getters ： 按需取出数据源中的数据

getters: {
   userLimit: (state) => state.user_limit,
   search_phone: (state) => state.search_phone,
   user_info_getters: (state) => state.user_info,
}

---

3、mutations

mutations ：mutations是更新store中数据的唯一途径，且是同步操作，不是异步的。mutations中 用户自定义的函数有一个特点，会接收一个以state为第一参数的回调函数。也就是说，前面两个state和getters都是状态值本身，mutations才是改变状态的执行者。

mutations: {
   // 修改user_limit，并将user_limit存入localStorage
   handleUserLimit: (state, user_limit) => {
     state.user_limit = user_limit
     localStorage.setItem('user_limit', user_limit)
   },
   handlesearchPhone: (state, search_phone) => {
      state.search_phone = search_phone
      localStorage.setItem('search_phone', search_phone)
   },
   userInfoFunc: (state, user_info) => {
       state.user_info = user_info
       localStorage.setItem('userInfo', user_info)
   },
 },

---

4、actions

actions： 和mutations的不同的是，actions支持异步和同步的操作，mutations只支持同步的操作。
当写上this.$store.dispatch('setUserInfo',xx)代码后，先执行actions，再执行mutations。即执行actions包裹的mutations中的userInfoFunc函数。

---

以下setTimeout(function () { }, 3000)代码模拟的异步操作我给注释后，那么this.$store.dispatch('setUserInfo',xx)和this.$store.commit('setUserInfo',xx)就一样了，都是同步操作。所以关键要看actions中的自定义函数你是如何写的。

actions:{
  setUserInfo({commit}, playload) {
  // setTimeout(function () { // 每3秒执行一次commit()来模拟异步操作
   commit("userInfoFunc", playload)// 同步执行mutations中的userInfoFunc函数
 // }, 3000)
  }
}

等同

actions:{
  setUserInfo(context, playload) {
  // setTimeout(function () { // 每3秒执行一次commit()来模拟异步操作
    context.commit("userInfoFunc", playload) // 同步执行mutations中的userInfoFunc函数
 // }, 3000)
  }
}

5、modules

modules 模块化Vuex。即每一个模块都有每个模块自己的state、getters、mutations、actions。大型项目需要这种模块化，相当于每个模块都有自己的数据库，不用同时操作同一个文件，也避免代码冲突。

---

使用

• 1.调用commit或者dispatch进行数据存储

// 同步赋值操作： 触发mutations中的handleUserLimit方法，从而改变state中的user_limit的值
this.$store.commit('handleUserLimit',res.data.data.body.isHost);
// 同步赋值操作：触发mutations中的handlesearchPhone方法，从而改变state中的search_phone的值
this.$store.commit('handlesearchPhone',res.data.data.manager.searchPhone);  
// 异步赋值操作
this.$store.dispatch("setUserInfo", JSON.stringify({name:'coderZb',sex:'1'}));  

• 2.取出数据

<template>
  <div class="shop_content"></div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['user_info_getters','userLimit']),
  },
  created() {
    console.log('用户信息---取法A---', this.user_info_getters)// 需要引入{ mapGetters } 并应用到computed:{}中
    console.log('用户信息---取法B---', this.$store.getters.user_info_getters)
    console.log('用户信息---取法C---', this.$store.state.user_info)

    console.log('权限---取法A---', this.userLimit)
    console.log('权限---取法B---', this.$store.getters.userLimit)
    console.log('权限---取法C---', this.$store.state.user_limit)
    
    //  不可以用下面的取法。取的是getters里面的属性 不是state里面的属性
    console.log('错误取法', this.$store.getters.user_info)
   
  },
}
</script>

打印结果

image.png

---

作用：

将 state 作为数据中心、各个组件共享 state 实现跨组件通信的

应用场景

1、公共数据(多个页面都会用到的的公共数据。例如用户的token，用户信息等)
2、非父子组件间的通信(跨组件、毫无关系的N个页面)

PS:父子组件的通信通过以下两种方式：
1.使用prop 属性实现父组件向子组件传递数据；
2.在子组件中通过$emit向父组件传递数据(例如 this.$emit('mapclick', event.latLng))