vue入门七之vuex的使用

一、vuex是什么？

　　上官网的解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。接下来看下面的这个图，有个简单一点的图来说明下：

　　    

 

 

　　

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

 

 　　那么它们实际上就是一个单项数据流，上面三条解析的很清楚了，我们在视图上输入数据时就会导致数据源的改变，数据源的改变就会导致视图的改变，就是这么回事，那么现在就容易理解了我们的状态管理是怎么回事了，很简单我们只需要操作状态管理的数据，将其映射到视图上即可。不需要再在子父组件传递参数的麻烦了，我们只需要一个状态机就可以搞定了。

 

二、vuex如何使用？

　　关键点来了，我们如何来使用它

　　　　 还是一步步的来，从安装整起：

　　　　1.在终端输入npm install vuex --save即可安装成功

　　　　2.在package文件下查看'vuex'是否安装成功，如下：

　　　　

 

 

 　　　　有的话就是安装成功了

　　　　3.创建一个状态机，我这里就直接命名为store了。

　　　　　　那么创建好之后，我们就可以直接在里面书写相关的属性了，如下：

　　　　　　

import Vue from 'vue'
import Vuex from 'vuex'
import test from '../components/test.js'

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        one:5,
        two:6
    },
    mutations:{
        add(state){
            state.one += 1;
            state.two += 1;
        },
        reduce(state){
            state.one -= 1;
            state.two -= 1;
        }
    },
    getters:{
        res(state){
            return state.one + state.two;
        }
    },
})

　　注意是如何进行使用的。

　　接下来我们只需要在main.js中引入即可

　　　　

 

 

 

 　　4.如何使用里面的值，我们就举个最简单的例子，如何使用store里面state里面的数据：

　　　　在官网state提供了一个获取state的方法，这个方法就是$store,比如说我们要获取one，那么现在的操作就是this.$store.state.one

　　　　这个是在获取较少的情况下使用的，获取多个呢？我们该如何来操作呢？那么就用如下的方法：

　　　　这里我提倡使用展开运算符来进行操作：

　　　　

 

 

 　　　　这上面还要引入vuex里面的mapState属性：

　　　　

 

 

 　　　　这就是它的大概使用了

 

 

三、内部的各个属性认识

··1.第一个就是state，上面我拿它来举例已经说得差不多了，这里就不多说啦

··2.第二个就是getter，这个和computed非常的相似，就是当它的依赖发生改变时就会被重新计算，使用的话就看上面的代码getters，下面截图就是把其从状态机中拿出来

　　

 

 

 　　当然这个还是要在上面引入mapGetters的，方式和mapState的引入是一样的········································注意上面两个都是要在计算属性computed下面来引入的

··3.第三个就是mutiton，就是它自身定义的状态而已

····这个就相当于定义了某种方法，我们所有的功能全部放置在里面。这样就类似于我们工厂，对应的厂房里面就有对应能生产工件的方法，将功能给独立开来。

····那么里面的函数就是想当于我们的功能，例如上面的add增加函数，它接收一个参数，这个参数就是state，是默认指定的参数，第二个参数就是我们的载荷，简单点来理解就是我们的形参，我们使用用commit调用它时所传入的数据，看下面：

····   映入后我们直接在标签中定义@click="add"调用即可

····注意要传入参数的话直接在add函数里传入即可，那么store里面是怎么书写的呢？

····

 

 

····官方也提供this.$store.commit("add")进行触发，当然这不是优先考虑的

 

··4.第四个就是action，我们这个主要用来处理异步操作的（注意上面的mutition只能够处理同步）

 

····这个内部函数的第一个参数就是context，这个context上面可以获取getters和state，还有通过context.commit来触发mutitions，还可以通过context.dispatch来触发action，那么下面就来一段：

 

····  直接通过dispath()触发即可，当然还可以在methods直接 

····下面是我在仓库内部所写的异步代码：

 

 

 如果想在data里面使用add时，只需要context.commit("add")即可

··5.module这个就简单啦，为什么有它的出现，原因是因为由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

····module就是为了解决代码臃肿的问题，它允许我们将状态进分割成各个模块，那么我们每个模块对应一个状态，这样很利于我们进行相关的操作

····具体如何实现的呢？

····下面就是我们的test模块，它就是一个对象，我们只需要在vuex中引入即可

export default{
    namespaced:'test',
    state:{
        one:5,
        two:6
    },
    mutations:{
        add(state,payload){
            state.one += 1;
            state.two += 1;
        },
        reduce(state,payload){
            state.one -= 1;
            state.two -= 1;
        }
    },
    getters:{
        res(state){
            return state.one + state.two;
        }
    },
    actions:{
        async data(context,pl){
            await new Promise((resolve,reject)=>{
                resolve(1);
            }).then( res=>console.log(res))
        }
    }
}

 

我们将在总的状态机里面进行管理，我们现在只需要引入即可，代码如下：

      这里特别注意的一点是我们的namespaced  它是将我们各个模块进行区分，避免了我们模块之间的重复

····还有一个点就是我们映射时也会做一些相应的改变：

······    注意在映射的时候就要加上每个模块的名称了，代表的是每个模块下面的方法

 

····以上就是五个属性的简单使用，到这里就应该是大概明白啦

 

 

 

 

 

 

 

 

 

四、一点小总结

　　最后我们要做一个项目实际上不需要很多的知识，只需要我们会一部分知识就可以了，如果想往更长远的去发展，那么建议多去阅读下底层的东西，无论是自己的认识还是自己的工资肯定还是有一定的提升的。

 

Getter