前言：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獲取數據，渲染，並動態更新數據就算完成了，還有什么不明白的小火把記得給我留言哦。未完待續......