vuex入門

vuex是個集中式管理數據,在大型的單頁網頁上用比較好,在小項目上就有點累贅

我用vue-cli建了個腳手架（須要先配置好vue）

vue init webpack-simple vuex-demo

 

根據vuex官方文檔，下載vuex

npm i vuex -D

 

準備好後，咱們須要在src文件夾下建一個store文件夾來專門存放於vuex相關的文件

——》

 

接下來新建5個js文件（注意：官方說3個，可是5個會分得更細，更好維護），分別以下

根據官方文檔，我的理解這幾個js文件分別的做用是

1.actions.js  　　//這個文件是給methods:mapActions提供可調用方法的方法名,真正的運算在mutations裏

2.getters.js 　　 //這個文件是給mutations數據用的方法

3.index.js  　　  //這個文件是彙總store文件夾下的全部文件的.

4.mutations.js 　　//這個文件是給action提供可調用方法的,而且提交全部方法與數據到index.js

5.type.js 　　　//這裏是給actions.js提供方法名

 

我作了一個小小的demo，效果以下圖

功能:

　　從左往右分別是

　　按鈕1:點擊增長1

　　按鈕2:點擊減小2

　　按鈕3:當爲偶數時,才能點擊,並增長1

　　按鈕4:點擊後隔1秒後才加1

　　按鈕5:點擊加2

 

代碼以下:

　　App.vue文件　　　

 1 <template>
 2   <div id="app">
 3     <h3>welcome vuex</h3>
 4     <button @click="increment">增長</button>
 5     <button @click="decrement">減小</button>
 6     <button @click="clickOdd">偶數才能點擊</button>
 7     <button @click="clickAsync">點擊異步</button>
 8     <button @click="addtwo">點擊加2</button>
 9     <div>
10       如今的數字爲:{{count}} 它是{{getOdd}}
11     </div>
12   </div>
13 </template>
14 
15 <script>
16   import {mapGetters,mapActions} from 'vuex'　　//從vuex mapGetters,mapActions兩兄弟
17 
18 　export default { 
19 　　　　computed:mapGetters([ //計算時,獲取用了getters裏的規則配置的motations那邊裏的count 
20 　　　　　　　　'count', 
21 　　　　　　　　'getOdd' 
22  　　　　]), 
23 　　　　methods:mapActions([ //獲取方法名 
24 　　　　　　　　'increment', 
25 　　　　　　　　'decrement', 
26 　　　　　　　　'clickOdd', 
27 　　　　　　　　'clickAsync', 
28 　　　　　　　　'addtwo' 
29  　　　　　　]) 
30 　} 
31 </script>

 

　　main.js文件

1 import Vue from 'vue'
2 import App from './App.vue'
3 import store from './store/'   //引入store文件
4 
5 new Vue({
6   el: '#app',
7   store,
8   render: h => h(App)
9 });

 

　　actions.js文件

 1 //這個文件是給methods:mapActions提供可調用方法的方法名,真正的運算在mutations裏
 2 
 3 
 4 import * as types from './types.js'
 5 //做爲一個命名空間,能夠用types.xxx的方式使用types裏的內容
 6 export default {
 7   increment:({commit})=>{ //處理你要幹什麼,如異步請求,判斷,流程控制,commit是個對象
 8     commit(types.INCREMENT);   //提交方法名
 9   },
10   decrement:({commit})=>{
11     commit(types.DECREMENT)
12   },
13   addtwo:({commit})=>{
14     commit(types.ADDTWO)
15   },
16   //偶數才能點
17   clickOdd:({
18               commit,   //給mapActions提交的
19               state     //狀態數據
20      })=>{
21 
22           if(state.mutations.count%2===0){
23             commit(types.INCREMENT);
24         }
25   },
26 
27   //點擊異步
28   clickAsync:({commit})=>{
29     new Promise((resolve)=>{
30       setTimeout(function(){
31         commit(types.INCREMENT);
32         resolve();
33       },1000)
34     })
35   }
36 }

 

　　getters.js文件

 1 //這個文件是給mutations數據用的方法
 2 
 3 export default {
 4   count:(state)=>{
 5     return state.count
 6   },
 7   getOdd:(state)=>{
 8     return state.count%2===0?'偶數':'奇數'
 9   }
10 }

 

　　index.js文件

 1 //這個文件是彙總全部store下的文件的.
 2 
 3 import Vue from 'vue'
 4 import Vuex from 'vuex'
 5 
 6 Vue.use(Vuex);
 7 
 8 import actions from './actions.js';
 9 import mutations from './mutations.js'
10 
11 export default new Vuex.Store({
12   modules:{
13     mutations
14   },
15   actions
16 });

 

　　mutations.js文件

 1 //這個文件是給action提供可調用方法的,而且提交全部方法與數據到index.js
 2 
 3 import {INCREMENT,DECREMENT,ADDTWO}from './types.js'
 4 import getters from './getters.js'　　　　//調用getters那邊的方法
 5 
 6 
 7 const state={ 
 8   count:10
 9 };
10 
11 const mutations={
12   [INCREMENT](state){ //處理狀態(數據)變化　　加1
13     state.count++;
14   },
15   [DECREMENT](state){ //處理狀態(數據)變化  減1
16     state.count--;
17   },
18   [ADDTWO](state){ //處理狀態(數據)變化　　加2
19     state.count+=2;
20   }
21 
22 };
23 
24 export default{ //導出相關組件
25   state,
26   mutations,
27   getters
28 }

 

　　type.js文件

1 //這裏是給actions.js提供方法名
2 
3 export const INCREMENT='INCREMENT';
4 export const DECREMENT='DECREMENT';
5 export const ADDTWO='ADDTWO';

 

說到底，最重要的仍是

mapGetters, mapActions 這兩兄弟

弄完若是總是報錯說哪一個方法找不到是unkown Type ,從新run dev一下就好了