vuexmutations

Posted 2020-12-29 bgwhite

前言：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获取数据，渲染，并动态更新数据就算完成了，还有什么不明白的小火把记得给我留言哦。未完待续......