vuex（一）mutations

前言：vuex的使用，想必大家也都知道，类似于状态库的东西，存储某种状态，共互不相干的两个组件之间数据的共享传递等。我会分开给大家讲解vuex的使用，了解并掌握vuex的核心(state,mutations,getters,actions).

首先，我们需要将vuex的安装依赖下载下来，npm install vuex, 以下代码都会在vue-cli下完成

通过这样一个案例给大家说明mutations和state的作用及使用：

上述功能：主要通过便利状态库中的数据后，点击取消关注后，会从状态库中更新数据，并变更virtual dom

我们需要先了解一个基本的东西：

state：类似于vue中的data，状态库中的数据都放在state中，外部读取数据时，也是从state中读取的数据。

mutations：里面可以写一些方法供我们来更改state中的数据，需要配合commit使用。页面传递过来需求，然后commit（提交）到mutations中的某方法中用以改变state中的数据。可以说是存入数据前面讲到的都是如何获取state的数据，那如何把数据存储到state中呢？在 Vuex store 中，实际改变状态(state) 的唯一方式是通过提交(commit) 一个 mutation。mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东东作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象（其实这个东西跟git的commit很类似）还有一点需要注意：mutations方法必须是同步方法！

1.我们先创建一个store.js文件，用来作为状态库

源码如下：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({

state: {

    myCollect: [

        { "name": "杨志", "level": "主治医师", "department": "(门)消化儿科","url":"/static/images/personal-center/start.jpg" },

        { "name": "胡夷光", "level": "副主治医师", "department": "(门)内科","url":"/static/images/personal-center/start.jpg" },

        { "name": "李特点", "level": "专家", "department": "(门)皮肤科","url":"/static/images/personal-center/start.jpg" },

    ],

},

mutations: {

    changeCollect: function (state,oIndex) {

        state.myCollect.splice(oIndex,1)

    }

},

    getters: {},

    actions: {}

});

export default store

state中changeCollect方法就是我们用来删除myCollect数组的方法，两个参数，一个是state（数据中的哪个数据），oIndex为裁剪的额一个下标。

new Vuex.Store({}) 表示创建一个Vuex实例，通常情况下，他需要注入到Vue实例里. Store是Vuex的一个核心方法，字面上理解为“仓库”的意思。

Vuex Store是响应式的，当Vue组件从store中读取状态（state选项）时，若store中的状态发生更新时，他会及时的响应给其他的组件（类似双向数据绑定）而且不能直接改变store的状态，改变状态的唯一方法就是，提交更改（mutations选项）以上为store状态库文件

vue调用文件如下:

<template>

    <div class="wraper">

        <div class="container">

            <div class="section">

                <block v-if="collect"></block>

                <block v-else>

                    <a class="row" v-for="(item,index) in myCollect" :key="index" href="javascript:;" hover-class="none">

                        <div class="col-l"><img style="width: 96rpx;height: 96rpx;" :src="item.url"></div>

                        <div class="col-r">

                            <div class="info">

                                <p class="info-top"><span class="info-name">{{item.name}}</span> <span class="info-level">{{item.level}}</span></p>

                                <p class="info-depart">{{item.department}}</p>

                            </div>

                        <div :data-index="index" class="btn-cancel" @click="unFollow('取消关注',$event)">取消关注</div>

                    </div>

                </a>

            </block>

        </div>

    </div>

</div>

</template>

<script>

import store from '../../../utils/store';

export default {

components: {},

data () {

return {

collect: false,

}

},

computed: {

    myCollect: function () {

        return store.state.myCollect;

    },

},

methods: {

    unFollow: function (prompt,res) {

    // console.log(prompt,res);

        let oIndex = res.currentTarget.dataset.index;

        store.commit("changeCollect",oIndex);

    }

},

}

</script>

<style scoped>

.container {

    flex: 1;

    overflow-y: auto;

    background-color: #fff;

}

.section {

    width: 100%;

    height: 100%;

}

.row {

    width: 100%;

    height: 160rpx;

    line-height: 160rpx;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    overflow: hidden;

}

.row .col-l {

    width: 96rpx;

    height: 96rpx;

    /*box-sizing: border-box;*/

    padding-left: 24rpx;

}

.row .col-r {

    flex: 1;

    height: 100%;

    box-sizing: border-box;

    border-bottom: 1rpx solid #ebebeb;

    padding-right: 24rpx;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.col-r .info {

    box-sizing: border-box;

    padding-left: 24rpx;

}

.col-r .info p {

    height: 30rpx;

    line-height: 30rpx;

}

.btn-cancel {

    height: 55rpx;

    line-height: 55rpx;

    padding: 0 22rpx;

    border: 1rpx solid #999;

    color: #999;

    font-size: 30rpx;

    border-radius: 5rpx;

}

.info {

    font-size: 26rpx;

}

.col-r .info .info-top {

    height: 60rpx;

    line-height: 60rpx;

}

.info .info-name {

    font-size: 36rpx;

    color: #404040;

    font-weight: 600;

}

.info .info-level {

    color: #404040;

    margin-left: 21rpx;

}

.info .info-depart {

    color: #999;

}

</style>

该文件中，computed中myCollect方法用以获取状态库中的数据，一般都放在computed计算属性中获取数据，因为该属性会监控数据变化并及时做出相应。

然后再methods方法中将我们所点击取消关注的行的下标获取，并通过commit方法发送给状态库，两个参数("mutations中的方法的名称",传递的数据下标)；

以上为博主通过mpvue开发小程序所列，所以大家主要看思路哦，copy代码永远不会长大。加油

至此我们通过vuex获取数据，渲染，并动态更新数据就算完成了，还有什么不明白的小火把记得给我留言哦。未完待续......

巴特西

vuex（一）mutations

最新文章

热门文章