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一下就行了

 

posted @ 2018-03-17 00:55  灰犀  阅读(127)  评论(0)  编辑  收藏  举报