Vuex状态管理（简单易懂、全网最全）

目录

Vuex是什么？

如何部署

如何使用

state

基础使用 

在计算属性属性中使用

使用展开运算符

mutations

基础使用 

使用辅助函数（mapMutations）简化

使用常量替代 Mutation 事件类型

getters

actions

使用辅助函数（mapActions）简化

modules

在组件中使用子模块的mutations

声明namespace

---

官网地址：Vuex 是什么？ | Vuex (vuejs.org)

Vuex是什么？

Vuex是专门为Vue.js应用程序开发的状态管理模式。它采用集中式储存管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单来说：状态管理就是将数据存储起来共所有的组件使用，为了保证安全使用一些规则限制一下

使用场景：保存一些需要公共使用的信息，登陆的用户信息、登录的权限信息等。

Vuex的核心：state、mutations、actions 

• state：储存公共的一些数据
• mutations：定义一些方法来修改state中的数据
• actions：使用异步的方式来触发mutations中的方法进行提交

此部分的代码在vue-cli中使用

如何部署

创建vue-cli时选择部署Vuex

如果选择部署了Vuex创建的工程，在你的工程中就会多一个store文件夹，就证明可以使用。

如何使用

---

state

状态管理使用起来非常的简单，分为模板上使用和方法中使用

基础使用 

<template>
  <div>
    <!--模板上直接使用-->
    state中的count属性count：{{$store.state.count}}
  </div>
</template>
<script>
export default {
  //页面初始化钩子
  mounted() {
    this.fun1();
  },
  methods:{
    fun1(){
      //方法中使用
      console.log("state中的count属性count：",this.$store.state.count);
    }
  }
}
</script>

浏览器结果：

在计算属性属性中使用

当一个组件需要获取多个状态的时候，将这些状态声明成计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

1.先在组件中导入mapState函数。mapState函数返回的是一个对象。

<script>
  import {mapState} from "vuex"

 2.在组件的计算属性中使用mapState。

computed:mapState({
    count:"count", //可以直接使用，用处不大，还不如直接在外面用
    myCount(state){
      // 计算属性后使用。num是本地的属性
      return state.count+this.num
    }
  })

使用展开运算符

在之前的示例中，不方便和本地的计算属性混合使用，下面我们使用展开运算符，这样就可以和本地的计算属性一起使用

computed:{
    localhost(){
      //本地的计算属性，没有Vuex的状态参加
      return this.num+1
    },
    ...mapState({
      count:"count", //可以直接使用，用处不大，还不如直接在外面用
      myCount(state){
        // 计算属性后使用。num是本地的属性
        return state.count+this.num
      }
    })
  }

---

mutations

state中的数据是只读的，不能直接进行修改。想要修改state数据的唯一途径就是调用mutation方法。使用commit()函数，调用mutation函数。

注意：mutation中只能执行同步方法。

基础使用 

在mutation中定义方法，在方法中修改state

mutations: {
    //state是状态，num是额外的参数，
    //额外的参数可以有多个，官网推荐使用对象类型。
    add(state,num){
      state.count=state.count+num;
    },
    //es6中的新语法，和上面方法效果一样
    add2({count},num){
        count=count+num
    }
  },

直接调用，感觉和自定义事件有些类似，也是需要写一个事件来触发这个方法

methods:{
    fun2(){
      this.$store.commit('add',2)
    }
}

使用辅助函数（mapMutations）简化

1.先在组件中导入mapMutations函数。

<script>
  import {mapMutations} from "vuex"

 2.在组件的方法中使用mapMutations配合展开运算符去使用。

methods:{
    fun1(){
      //方法中使用
      console.log("state中的count属性count：",this.$store.state.count);
    },
    ...mapMutations({
      addFunc:'add',   //将`this.addFunc()`映射为`this.$store.commit('add')`
      reduceFunc:'reduce'
    })
  }

如果自己定义的方法名和mutations中的方法名一致，可以使用数组的方式

methods:{
    fun1(){
      //方法中使用
      console.log("state中的count属性count：",this.$store.state.count);
    },
    ...mapMutations([
      add,   //将`this.add()`映射为`this.$store.commit('add')`
      reduceByid //传参的形式，将`this.reduceByid(id)`映射为`this.$store.commit('reduceByid ',id)`
    ])
  }

使用常量替代 Mutation 事件类型

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：

 简单来说就是：多人用的时候就方便，就跟一个单独列出来的说明书一样，找的时候好找。

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import { createStore } from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = createStore({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能
    // 来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // 修改 state
    }
  }
})

用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做。

---

getters

getters就是在vuex中的计算属性。

在vuex中声明getter方法

getters:{
    doubleCount(state){
        return state.count*2
    }
}

在组件中获取getters

methods:{
    fun3(){
      console.log(this.$store.getters.doubleCount)
    }
}

---

actions

• actions中的方法可以是异步的
• actions修改state的内容，需要通过mutations
• 在组件中调用action需要调用dispatch()函数

1.声明action方法

actions:{
    delayAdd(context,num){
        // 模拟异步，延时2秒增加
        setTimeout(function(){
            //调用mutations中的方法
            context.commit('add',num)
        },2000)
    }
}

2.直接调用action方法

func4(){
    this.$store.dispatch('delayAdd',2)
}

使用辅助函数（mapActions）简化

1.先在组件中导入mapActions函数。

<script>
  import {mapActions} from "vuex"

 2.在组件的方法中使用mapActions配合展开运算符去使用，

使用效果和mapMutations类似

methods:{
    func4(){
        this.$store.dispatch('delayAdd',2)
    },
    ...mapActions({
        delayAddLocal:'delayAdd'  //将`this.delayAddLocal()`映射为`this.$store.dispath('delayAdd')`
    })
}

---

modules

在复杂的项目中，我们不能把大量的数据堆积到store中，这样store的内容就太多，而且比较凌乱，不方便管理。所以就出现了modules。将原有的store切割成一个个的module。每个module都有自己的state、mutations、actions和getters

1.定义一个modules并导出

const storeModuleA={
    state:{
        countA:10
    },
    mutations:{
        addA(state){
            state.countA++
            console.log("moduleA:"+state.countA);
        },
        // 此方法和store根中的mutations方法名称一致，后面测试使用
        add(state){
            console.log("moduleA:"+state.countA);
        }
    }
}
export default storeModuleA //到导出此对象

2.在store.js中，导入并注册此modules

import Vue from 'vue'
import Vuex from 'vuex'
import storeModuleA from './storeModuleA' //导入model
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    //state是状态，num是额外的参数
    add(state,num){
      state.count=state.count+num;
    }
  },
  actions: {
  },
  modules: {
    a:storeModuleA
  }
})

3.在组件中使用子模块中的状态

func5(){
    console.log(this.$store.state.a.count)
},

在组件中使用子模块的mutations

• 没有声明namespace的情况
  • 子模块中mutations在没有使用namespace的情况下，这些方法会注册到store根中
  • 如果模块的mutations中的方法和store根中的mutations中的方法一样，则都会被调用。

func5(){
    console.log(this.$store.state.a.count)
    this.$store.commit('addA') //和根中不一样的mutations方法名
    this.$store.commit('add') //和根中不样的mutations方法名
},

如果都被调用，肯定是不合适的

声明namespace

1.声明namespace并在module中添加

modules: {
    a:{
        namespace:true,
        ...storeModuleA //使用展开运算符
    },
    b:{
        namespace:true,
        //不使用的情况
        state:storeModuleA.state,
        mutations:storeModuleA.mutations
    }
}

在组件中调用加上别名即可

this.$store.commit('a/add')

---

Wishing you a happy day