Vuex（一）各方法的使用详解

一.什么是Vuex

开门见山，为什么要使用vuex？在vue项目中如果我们要用到组件传值，一般会选用父子，子父通信的方式，对于简单的项目这种方式是非常方便的。但是对于数据量非常大的项目，是不可取的。Vuex就为我们提供了一种集中管理数据的方式；

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

二.state

state是Vuex的数据源，所有的数据都存储在state，Vuex的其他方法都围绕state开展；
获取state的值，有两种方式，一种是直接获取，另一种是通过映射获取；

1.直接获取state中的值

//Vuex中定义count
state: {
        count: 0
    },

//组件中使用
<p>获取count方式1:直接获取--{{ $store.state.count }}</p>

2.映射获取

映射获取首先需要导入mapState方法，然后在computed中调用

//导入
import { mapState } from "vuex";

<p>获取count方式2:函数获取--{{ count }}</p>

//mapState返回值是一个对象，对象的值为函数，通过结构展开还原为一个函数
//等价于{count(){.....}}
computed:{
...mapState(["count"]),
}

三.getters

getters用于对state的预处理；

getters: {
        even(state) {
            return state.count % 2 === 0 ? '偶数' : '奇数'
        }
    },

调用同样是两种方法

 <p>getter使用方式一:直接使用--{{ $store.getters.even }}</p>
 <p>getter使用方式二:函数调用--{{ even }}</p>

 // getter
computed:{
	...mapGetters(["even"]),
}

四.mutations

1.mutations用于对state中值的修改；

    mutations: {
        update(state, num = 1) {
            state.count += num
        },
     }

调用：

	<p>直接改变count</p>
    <button @click="updatecount">count+1</button>
    <p>调用函数改变</p>
    <button @click="update()">count+1</button>
    
methods:{
  //直接触发update
updatecount() {
      this.$store.commit("update");
    },
}
 //调用函数映射为update
    ...mapMutations(["update"]),

2.mutations的传参

mutations默认只能穿一个参数，对于多个参数可以使用对象形式传递；

 mutations: {
 updateMore(state, payload) {
            state.count += payload.num
        }
        }

    <button @click="updateMorecount">直接传递</button>
    <button @click="updateMore({ num: 5 })">函数传递</button>
     updateMorecount() {
      this.$store.commit("updateMore", { num: 5 });
    },
      //传递多个参数
    ...mapMutations(["updateMore"]),

五.actions

为了每一步对数据的操作都形成快照，mutations是不支持异步的，异步操作在action中完成；

 actions: {
        updateDelae(context) {
            setTimeout(() => {
                context.commit('update')
            }, 1000)
        }
    },

    <p>异步修改组件的值</p>
    <button @click="updateAgeFnDelate">直接调用</button>
    <button @click="updateAgeDelate">调用函数</button>
    //直接异步调用
    delayUpdate() {
      this.$store.dispatch("updateDelae");
    },
    //调用函数异步
    ...mapActions(["updateDelae"]),

六.modules

对于大的工程来说，一个项目中只有一个state是不够的，所有引入了模块的概念，便于对数据的分类管理；

//模块
 modules: {
        name: {
            namespaced: true,
            state: {
                name: 'liyfn'
                , age: 18
            },
            actions: {
                updateAgeDelate(context) {
                    setTimeout(() => {
                        context.commit('updateAge', 5)
                    }, 1000)
                }
            },
            mutations: {
                updateAge(state, payload) {
                    state.age += payload
                },

            }

        },

    }

1.获取state

   <!-- 模块 -->
    <p>获取组件的值-直接获取:{{ $store.state.name.name }}</p>
    <p>间接获取：{{ age }}</p>
    //组件获取
    //方式一：在mapstate中第一个参数传入组件名字
    ...mapState("name", ["age"]),
    
    //方式二：引用createNamespacedHelpers ，实例化时候传入组件名称
    //并解构出来mapState方法，避免与原名称冲突，使用重命名
    import { createNamespacedHelpers } from "vuex";
	const {mapState: mapStateAn} = new createNamespacedHelpers("name");
     ...mapStateAn(["age"]),

2.mutations，action，getters

使用方法大同小异，我们以mutations举例：

    <button @click="updateAgeFn">直接修改</button>
    <p>修改组件的值方式二，借用函数</p>
    <button @click="updateAge(5)">借用函数</button>
	
	    //修改组件的值方式一
    updateAgeFn() {
      this.$store.commit("name/updateAge", 5);
    },
    //修改组件的值 方式二
    //同state获取
    // ...mapMutationsAn(["updateAge"]),
       ...mapMutations("name", ["updateAge"]),

那么关于Vuex中各个方法的使用我们已经介绍完了，当然，Vuex中也不止这些，我们下次分解；