背景
vue全家桶對我來說，已經多多少少用了快一年了，但是每次用到一些東西總是需要去查，總是不能很確定，加上灑家也不是一直連續用vue，導致我每次學會的的東西，過段時間在用的時候還需要重新查文件，這讓我感覺十分困擾，所以我覺把整個學過的東西系統性的整理出來應該會有所幫助，希望自己以後能夠堅持吧。
安裝vuex
安裝 Vuex
(前提是已經前提是已經用Vue腳手架工具構建好專案）
npm install vuex --save
- 新建一個資料夾
vuex，在資料夾裡面新建store.js，並在檔案中引入vuex
.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
複製程式碼通過上面的步驟，vuex就算是安裝註冊成功了，下面就可以用vuex搞事情了
import store from './vuex/store'
複製程式碼- 最後我們需要例項化vue物件時加入store物件
.
new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})
複製程式碼完成以上的工作，下面我們就可以做個屬於自己的小demo了
第一個demo
- 在
store.js檔案裡
const state = {
count:1
}
const mutations = {
add(state){
state.count++;
},
reduce(state){
state.count--;
}
};
const getters = {
isLogin:state =>{
return state.count
}
};
const sctions = {};
//基本格式為
export default new Vuex.Store({
state，
getters，
mutations
});
複製程式碼用export default 封裝好store物件，以便外部使用
由於我暫時感覺還用不到 actions，所以就等以後用到了再來補充吧
下面就是在元件內使用的方法了，
- 在
components資料夾下新建一個count.vue
<template>
<div>
<h2>{{msg}}</h2>
<hr/>
<h3>{{count}}</h3>
<button @click="add">+</button>
<button @click="reduce">-</button>
</div>
</template>
<script>
import store from '@/vuex/store'
import {mapGetters} from 'vuex';
export default{
data(){
return{
msg:'Hello Vuex',
}
},
computed:{
count(){
return this.$store.state.count;
},
isLogin(){
return this.$store.getter.isLogin;
}
},
methods:{
add(){
$store.commit('add')
},
reduce(){
$store.commit('reduce')
}
}
}
</script>
複製程式碼這應該算是最簡單的一個 例子了，
--- 接下來我來詳細闡述一下 mutations 和getters的使用`；
mutations
const mutations={
add(state){
state.count+=1;
},
addNumber(state,n){
state.count +=n;
}
}
複製程式碼這裡的mutations是固定的寫法，意思是改變的,store裡面的數僅能通過
mutations裡面的方法改變,但是必須是同步的，如果這裡面出現 非同步的邏輯會出現在unexpected fault,如果要是用非同步的邏輯，可以寫在actions裡面，用它處理完後再出發mutations來改變狀態
說了這麼多，我們最關心的肯定是在元件裡面怎麼用，接下來就看一看，我們費了那麼大的勁兒，就是為了最後食用我們之前辛勤耕耘的果實了。
store訪問狀態物件
const state ,這個就是我們說的訪問狀態物件，他就是我們spa（單頁面應用程式）中的共享值。
- 通過computed的計算屬性賦值
computed屬性可以在輸出前，對state.js的值進行改變，我們就裡利用這種特性把store.js中的state賦值給我們模板中的data值
多說無益，看程式碼
computed:{
yourdata(){
return this.$store.state.count
}
}
複製程式碼要注意一定要寫this要不然找不到$store的，這種寫法雖然好理解，但是寫起來麻煩，因此我們可以利用
mapState的對映方法，來是我們的程式碼簡潔，方便日後的維護。
- 通過mapState的物件賦值
首先引入mapState
import {mapState} from 'vuex'
複製程式碼然後還在computed計算屬性裡寫如下程式碼：
computed:mapState({
count:state=>state.count //理解為傳入state物件，修改state.count屬性
})
複製程式碼- 或者
computed:{
...mapState(['state1','state2','state3'])
}
複製程式碼再看下state的兄弟，getters
getters
getters 可以說是相當於 vue中的 computed，是依賴於 state裡面的值
getters:{
isLogin:state =>{
return Boolean(state.stateValue);
}
}
複製程式碼使用起來 和 state十分的像，如下：
computed:{
isLogin(){
return this.$store.getters.isLogin;
}
}
複製程式碼如果多的話可以引入 mapGetters模組，如下：
import {mapGetters} from 'vuex';
<!--在computed裡-->
computed:{
...mapGetters(["isLogin"])
}
複製程式碼其實我們還可以 用
mapMutations來對映我們的mutation，如下
在store.js檔案中寫入
export default new Vuex.Store({
state:{
count:1
},
mutations:{
add(state){
state.count++;
}
addNumber(state,n){
state.count += n;
}
}
});
複製程式碼然後我們在元件中使用可以直接這樣搞
在testComponent.vue檔案中
import {mapMutations} from 'vux';
methods:{
...mapMutations([
'add',//把 this.add() 對映為 this.$store.commit('add');
'addNumber' // 將 this.addNumber(n)對映為 this.$store.commit('addNumber',n);
]),
...map({
justAdd:'add' //將 this.justAdd()對映為 this.$store.commit('add');
})
}
複製程式碼終於把自己的第一篇文件（在掘金裡面）寫完了，作為一個經驗不足的小菜鳥，希望能夠幫到那些剛入門的，還望各路神仙輕噴。
last but not least
vuex真的是特麼太好用了，但是我的狀態管理就是一把梭，我選擇用{};
溜了~~~~