在腳手架創(chuàng)建時(shí)候選擇依賴要把vuex給選上表牢，（如果在腳手架忘記選了就npm i vuex或者yarn add vuex），我這里展示的是自己創(chuàng)建了一個(gè)叫vuex的文件夾里面也創(chuàng)建了一個(gè)store.js的文件沐悦。搭建好了會(huì)在src文件夾多一個(gè)叫store的文件夾成洗，這個(gè)文件夾里面有著index.js這個(gè)文件（為了后期維護(hù)方便,單一職責(zé)原理，所以選擇代碼分離）藏否。
-
store.js文件初始一般都是這樣
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {//狀態(tài)瓶殃，也可以理解成之前說(shuō)的模型數(shù)據(jù)
}
const mutations ={//定義對(duì)state里面的操作
}
export default new Vuex.Store({
state,
mutations
})
至于為什么這樣，下面再解釋吧副签。
假設(shè)現(xiàn)在我有一個(gè)同步修改的數(shù)據(jù)要處理遥椿，比如一個(gè)做加減法的摁扭，改變一個(gè)值淆储。
<template>
<div class="hello">
<button @click="increa">+</button>
<p>數(shù)字：{{$store.state.count}}</p>
//不用加this
<button @click="decrea">-</button>
</div>
</template>
這里我增加了count這個(gè)常量冠场，所以要把它加入到倉(cāng)庫(kù)里面，并且給個(gè)初始值為0
const state = {//狀態(tài)本砰，也可以理解成之前說(shuō)的模型數(shù)據(jù)
count: 0,
}
然后在模板那里也要export函數(shù)increa和decrea碴裙，實(shí)現(xiàn)加減。
<script type="text/javascript">
increa:function () {
// this.$store.state.count++
//不應(yīng)該是這樣点额，應(yīng)該是通過(guò)commit提交舔株，如果開啟vuex嚴(yán)格模式，就不允許直接修改倉(cāng)庫(kù)的state
this.$store.commit('increa',{number:100})
},
decrea :function () {
// this.$store.state.count--
this.$store.commit('decrea',{number:100002})
}
</script>
按理來(lái)說(shuō)还棱，應(yīng)該是可以用this.store.state.count--但是在vuex管理思想不是這樣载慈，應(yīng)該是通過(guò)commit進(jìn)行提交然后再store.js文件里面mutations就行處理。
const mutations ={//state為倉(cāng)庫(kù)對(duì)象珍手，paylod為commit時(shí)候傳入的載荷（負(fù)載）
increa :function(state,paylod) {
console.log(paylod);
state.count+=paylod.number
},
decrea :function (state,paylod) {
state.count--
console.log(paylod);
},
}
代碼優(yōu)化
- 問(wèn)題一：$store.state办铡，假設(shè)我一個(gè)頁(yè)面要用很多次辞做，那我可不可以只寫一次？
- 問(wèn)題二：decrea方法定義一次寡具，commit時(shí)候還得寫一次秤茅，是不是很麻煩？
問(wèn)題一：
//理想化
<!--希望把倉(cāng)庫(kù)里面的數(shù)據(jù)state 可以當(dāng)做普通的模型變量晒杈，可以直接在頁(yè)面上使用-->
<p>數(shù)字：{{ count }}</p>
1.// 需要從 vuex 里面導(dǎo)出一個(gè)函數(shù) mapState(作用嫂伞，可以把倉(cāng)庫(kù)里面的state映射到組件的 data 里面，要映射成計(jì)算屬性才可以) map 映射 State 狀態(tài)： 把 state 里面的狀態(tài)隱射到組件的內(nèi)容使用拯钻，減少 this.$store.state
import {mapState} from 'vuex';
//并且在export default里面加上 computed
computed: mapState(['count']),
/**
原理
* mapState(['count']), 底層：
* count: function(){
* return this.$store.state.count;
*
* }
*/
但是還有個(gè)小問(wèn)題哦帖努，假設(shè)computed里面原先就有一個(gè)我自己定義的函數(shù)列？那就
computed: {
// ... 使用 es6 的展開即可,并且給count取別名
...mapState({countAias: 'count'}),
/**
* mapState(['count']), 底層：
* count: function(){
* return this.$store.state.count;
*
* }
*/
// 之前存在一個(gè)自己的count
count: function () {
return '自己寫的count';
},
這時(shí)候我用的話就是直接用了
<p>store.state.count數(shù)字：{{ countAias }}</p>
這樣就不會(huì)和別人沖突了粪般。
問(wèn)題二：
如果可以把倉(cāng)庫(kù)里面的 mutations 映射到組件的 methods 里面拼余，則我們就可以直接修改 state
那我首先再導(dǎo)入這個(gè)
import {mapState, mapMutations} from 'vuex';
然后再export default那里寫
methods: {
...mapMutations(['increa','decrea'])
}
