投稿
  1. 极客之音首页
  2. 技术随笔

Vue简单实例——Vuex的共享数据和简化

飞熊 • • 技术随笔 • 阅读 343

梦想不抛弃苦心追求的人，只要不停止追求，你们会沐浴在梦想的光辉之中。再美好的梦想与目标，再完美的计划和方案，如果不能尽快在行动中落实，最终只能是纸上谈兵，空想一番。只要瞄准了大方向，坚持不懈地做下去，才能够扫除挡在梦想前面的障碍，实现美好的人生蓝图。Vue简单实例——Vuex的共享数据和简化，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

简单介绍：

这一章，我们主要来演示Vuex的数据共享，我们使用Vuex的最主要的想法就是实现数据的共享，也就是在多个组件中访问到同一数据以及可以在不同组件中修改同一数据。

共享数据：

最终效果：

Vue简单实例——Vuex的共享数据和简化

代码实现：其实代码的实现非常的简单，因为我们Vuex是一个，所以我们只需要访问同一个数据，但是调用方法的时候调用不同的方法就可以了：

s_com1:

<template>
    <div>
        <h1>
            {{$store.state.sum}}
            <button type="button" @click="add">+1</button>
        </h1>
    </div>
</template>

<script>
    export default{
        name:'s_com1',
        methods:{
            add(){
                this.$store.dispatch('add',1)
            }
        }
    }
</script>

<style scoped>
    div{
        border: 1px solid black;
        width: 300px;
        height: 100px;
        line-height: 100px;
        margin: 10px;
    }
</style>

s_com2:

<template>
    <div>
        <h1>
            {{$store.state.sum}}
            <button type="button" @click="sub">-1</button>
        </h1>
    </div>
</template>

<script>
    export default{
        name:'s_com2',
        methods:{
            sub(){
                this.$store.dispatch('sub',1)
            }
        }
    }
</script>

<style scoped>
    div{
        border: 1px solid black;
        width: 300px;
        height: 100px;
        line-height: 100px;
        margin: 10px;
    }
</style>

Getters：Getters的出现主要是方便了对于数据的批量，他就类似于我们Vue组件中的计算属性：

需求：现在，如果我们需要将我们计算后的数据乘以10的形式进行输出，我们要怎么做？

代码实现：

因为getters是store的一个全新的配置项，所以要在store的配置项上面进行添加配置：

index.js:

// 引入Vue组件，使用vue的use方法使用vuex组件
import Vue from 'vue'
// 引入Vuex组件，才能使用Vuex的组件效果
import Vuex from 'vuex'
// use方法表示这个Vue组件开始使用Vuex
Vue.use(Vuex)
// Vuex的三个组成部分，可以看到跟我们之前说的一样，这三个组成部分的值对应的都是Object对象
// 这里我们先不填内容，只是简单的创建一个Vuex环境
const actions = {
    // 这个方法的名字对应的就是我们在点击事件中的第一个参数
    // 这个方法有两个参数,第一个参数是应用程序上下文,可以调用commit方法将流程进行到mutations
    // 第二个参数就是我们在点击事件中传入的第二个参数,也就是修改值
    add(context,value){
        // 我们可以打印输出一下看看这两个参数更加具体的内容
        console.log("actions节点的第一个参数:",context)
        console.log("actions节点的第二个参数:",value)
        // 当然最重要的就是我们需要调用commit方法将流程传递到mutations
        // 这个方法的第一个参数就是mutations的函数名,我们一般习惯上会将这个参数大写,对应的函数名也会被大写
        // 第二个参数就是我们传递进来的修改值
        context.commit('ADD',value)
    },
    // 添加一个新的方法,参数是一样的
    event_add(context,value){
        // 在这里面进行逻辑判断
        if(context.state.sum % 2 == 0){
            // 当逻辑为真的时候,执行commit,进行到下一个流程
            context.commit('EVENT_ADD',value)
        }
    },
    sub(context,value){
        context.commit('SUB',value)
    }
}
const mutations = {
    // 在mutations中,有一个函数名与commit的第一个参数是相等的
    // 而这个函数的第一个参数是整个的state节点,第二个参数就是我们传进来的修改值
    // 这个节点是最终真正执行数据修改的地方，而在修改完数据之后，vue会自动的帮我们把新的数据渲染到组件，最后到页面中
    ADD(state,value){
        console.log("mutations节点的第一个参数:",state)
        console.log("mutations节点的第二个参数:",value)
        state.sum += value
    },
    // 添加一个新的方法，参数是一样的
    EVENT_ADD(state,value){
        // 我们也可以打印一下这个参数
        console.log("mutations节点的第一个参数:",state)
        console.log("mutations节点的第二个参数:",value)
        // 最终执行数据的修改
        state.sum += value
    },
    // 直接调用的mutations的方法,不需要经过actions节点
    DIRECT_ADD(state,value){
        // 我们也可以打印一下这个参数
        console.log("mutations节点的第一个参数:",state)
        console.log("mutations节点的第二个参数:",value)
        // 最终执行数据的修改
        state.sum += value
    },
    SUB(state,value){
        state.sum -= value
    }
}

const state = {
    // 我们还是先从数据开始，在state节点中添加一个sum变量，初始值我们设置为0
sum:0
}
// 首先,我们需要添加一个新的配置项,并且添加到Vuex的实例对象中
const getters = {
    // 在getter的方法中,第一个参数可以直接访问到state
    bigSum(state){
        // 通过state就可以直接访问到sum变量,然后进行操作
        // 操作完成之后的数据返回要用return
        return state.sum * 10
    }
}
// 创建一个Vuex的Store对象，并且将三个组成部分作为参数传递进去
// 注意，这里创建对象并不是简单的使用new关键字创建出来的Vuex，而是通过Vuex的构造方法Store来创建的，这样才能传递参数
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

Getter_demo.vue:

<template>
    <div>
        <h1>原值:{{$store.state.sum}}</h1>
        //getters里面的值需要从另一个节点中获取
        <h1>乘以10以后:{{$store.getters.bigSum}}</h1>
        <button type="button" @click="add">+1</button>
    </div>
</template>

<script>
    export default{
        name:'Getter_demo',
        mounted(){
            console.log(this)
        },
        methods:{
            add(){
                this.$store.dispatch('add',1)
            }
        }
    }
</script>

<style scoped>

</style>

最终效果：

Vue简单实例——Vuex的共享数据和简化

可以看到，当我们修改了原值，getters中的值也会随之修改。这个操作在我们需要经常修改原值的时候可以使用，避免了我们再组件中操作这个值，可以节省代码量

四个Map：MapState，MapMutatinons，MapActions和MapGetters

Map的本意是指映射，在这里就是将对应的组件中的数据进行映射，使用更加简便的方式来获取节点中的数据，也就是说这四个Map出现是为了方便我们获取数据的过程，我们首先来看正常的获取数据的方式，再来看使用Map的方式获取数据，去体会他们中间的区别。

这里我们就介绍一种，就是MapState，其他的使用方法是一样的，这里就不多做赘述

正常的获取数据：

<template>
<div>
  {{sum}}
</div>
</template>

<script>
export default {
  name: "MapState_demo",
  computed:{
    // eslint-disable-next-line vue/return-in-computed-property
    //当我们想要方便的使用state节点中的数据的时候，可以在计算属性中获取数据
    //接下来只需要使用插值语法在模板中直接调用这个计算属性就可以了
    sum(){
      return this.$store.state.sun
    }
  }
}
</script>

<style scoped>

</style>

 上面就是我们正常的使用计算属性获取数据并使用的过程，这只是一个变量还好说，当我们的变量的数量变多的时候，每一个计算属性写起来就非常的麻烦，这时候就可以使用Map方式简化我们获取数据的过程

使用Map的方式获取数据：

<template>
<div>
  {{sun}}
</div>
</template>

<script>
//首先使用解构赋值的方法获取到mapState
import {mapState} from 'vuex'
export default {
  name: "MapState_demo",
  computed:{
    // eslint-disable-next-line vue/return-in-computed-property
    //当我们想要方便的使用state节点中的数据的时候，可以在计算属性中获取数据
    //接下来只需要使用插值语法在模板中直接调用这个计算属性就可以了
    // sum(){
    //   return this.$store.state.sun
    // },
    //然后使用mapState获取stat节点中的sun数据
    //...的写法表示将对象中的值依次获取并添加到当前变量中
    ...mapState(['sun'])
  }
}
</script>

<style scoped>

</style>

两种不同的写法：

上面我们使用的是mapState的数据写法，我们还可以使用对象的写法，这么写的好处就是当我们使用的值和state中的变量的值不一样的时候就可以这么写：

<template>
<div>
  {{bianliang}}
</div>
</template>

<script>
//首先使用解构赋值的方法获取到mapState
import {mapState} from 'vuex'
export default {
  name: "MapState_demo",
  computed:{
    // eslint-disable-next-line vue/return-in-computed-property
    //当我们想要方便的使用state节点中的数据的时候，可以在计算属性中获取数据
    //接下来只需要使用插值语法在模板中直接调用这个计算属性就可以了
    // sum(){
    //   return this.$store.state.sun
    // },
    //然后使用mapState获取stat节点中的sun数据
    //...的写法表示将对象中的值依次获取并添加到当前变量中
    // ...mapState(['sun'])
    //当我们使用的值和state中存储的变量名不一样的时候，就可以使用这个方式
    ...mapState({bianliang:"sun"})
  }
}
</script>

<style scoped>

</style>

我们只介绍mapState，其他的三种map的使用方式和特性都是一样的，基本都差不多，这里就不多做赘述了。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/153335.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！