闲来无事程序媛VUEX的一条龙服务

来个正规的排版顺序 -->
✔前言

---

众所粥之，数据的传递有多种类型，分别来自父子间的数据传递，非父子的数据传递-这里不详细谈及provide/inject/eventbus-，辣么复杂类型的呐像这样：

孙子1：我想要4手里的黄色球
孙子4：让你爹跟老祖宗要
老祖宗：不用！我这里有一法宝传授于你...vuex-这里就成功引出了vuex的话题-

---

💲正文

1. Q1:Why?(为什么要用vuex)
答：因为业务需要实现非单一场景下大量数据间的通信
2. Q2:What?(vuex是什么)
答：是vue框架的状态管理工具。通俗的讲就是一个插件，帮我们管理vue多个组件里共享的数据，并且把这些公共数据放在store仓库中方便数据共享
3. Q3:How?(怎么使用vuex)
答：通过vuex的核心部件实现数据存储的修改，在组件中通过调用挂载在全局的store里面的数据和方法来获取和间接修改

---

♻这才是真的正文

vuex的核心部件：

• state： 提供唯一的公共数据源，所有的公共数据都要统一放在store中的state
  使用：
  1. 通过store直接访问---this.$store.state.###
  2. 通过辅助函数：

import { mapState } from 'vuex'
computed: {
    ...mapState(['count']),
    // 访问vuex中state数据的第二种方法:
    // 1.从vuex中按需引入mapState
    // 2.将全局数据映射为当前组件的计算属性
  },

• mutations: 修改state中的数据且state中的数据只能通过mutations来修改。（注意注意，mutations中不能执行异步任务否则vue调试器监视不到数据变化）
  

mutations: {
    // 用来存放修改state中数据的方法,第一个形参只能是state
    add (state) {
      state.count++
    },
    addN (state, N) {
      state.count += N
    },
    reduce (state) {
      state.count--
    },
    reduceN (state, N) {
      state.count -= N
    }
  }

使用：
1. 通过store的commit方法调用mutations中的函数---this.$store.commit('###')
2. 通过辅助函数：

<button @click="hreduce">-1</button>
<button @click="hreduceN">-N</button>
import { mapMutations } from 'vuex'//1.按需引入mapMutations辅助函数
methods: {
    ...mapMutations(['reduce', 'reduceN'])//2.把vuex中的方法映射到this
    hreduce () {
      this.reduce()
    },

• actions: 异步操作的方法，处理后的结果放回到mutations中使监听到后通过调用mutations中的方法修改state中的数据

actions: {
    // 辅助mutations执行异步操作,mutations直接进行一步操作的话vue调试器不能检测到
    // 第一个形参是context
    asyncadd (context) {
      setTimeout(() => {
        // 原理还是通过actions调用mutations来修改state的数据
        context.commit('add')
      }, 1000)
    },
    asyncaddN (context, N) {
      setTimeout(() => {
        // 原理还是通过actions调用mutations来修改state的数据
        context.commit('addN', N)
      }, 1000)
    },
    asyncreduce (context) {
      setTimeout(() => {
        context.commit('reduce')
      }, 1000)
    },

使用：
1. 通过store中的dispatch方法调用actions中的异步函数---this.$store.dispatch('###')
2. 通过辅助函数

import { mapActions } from 'vuex'
 methods: {
    ...mapActions(['asyncreduce', 'asyncreduceN']),
    hreduce () {
      // this.reduce()
      this.asyncreduce()
    },
    hreduceN () {
      // this.reduceN(10)
      this.asyncreduceN(10)
    }
  }

• getters:用来对state里面的数据加工并返回

getters: {
    // 用来对state里的数据进行加工后返回,相当于页面中的computed
    dealadd (state) {
      return 'getters-count:' + state.count
    },
    dealreduce (state) {
      return 'getters-count:' + state.count
    }
  }

使用：
1. 通过store中的getters方法得到计算属性的返回值---this.$store.getters.###
2. 辅助函数

<h1>{{ dealreduce }}</h1>
import { mapGetters } from 'vuex'
computed:{
  //相当于页面的computed计算属性，映射到其中后可直接使用 
  ...mapGetters(['dealreduce'])
}

• modules: vuex的模块划分，需要依赖以上四个核心成员
  sence: vuex为单一状态树内容较多时项目变大，vuex变得臃肿难以维护

  ---

  使用：
  1. 在store中新建modules划分再新建子模块--store/modules/users
  2. 在store/index.js里面引入并注册并导出--modules:{users}
  注意：
  1.给每一个模块取名字作为单独的空间进行隔离需要开启空间隔离
  

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

2. 分模块之后直接调用单独模块的方法需要加上模块名

this.$store.state.users.###
this.$store.commit('users/add',val)
this.$store.diapatch('users/asyncadd',val)
this.$store.getters('users/newcount',val)

3. 分模块后要辅助函数的调用也发生了改变，注意在影射时注明模块名称

// 1.按需引入辅助函数
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
// 2.将辅助函数获取到的状态映射到对应的属性方法中去
mathods: {
  ...mapMutations('users',['add'])
  ...mapActions('users',['asyncadd'])
},
computed: {
  ...mapState('users',['count'])
  ...mapGetters('users',['newcount'])
}