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文件　　　

<template>
  <div id="app">
    <h3>welcome vuex</h3>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="clickOdd">偶数才能点击</button>
    <button @click="clickAsync">点击异步</button>
    <button @click="addtwo">点击加2</button>
    <div>
      现在的数字为:{{count}} 它是{{getOdd}}
    </div>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'　　//从vuex mapGetters,mapActions两兄弟

　export default { 
　　　　computed:mapGetters([ //计算时,获取用了getters里的规则配置的motations那边里的count 
　　　　　　　　'count', 
　　　　　　　　'getOdd' 
 　　　　]), 
　　　　methods:mapActions([ //获取方法名 
　　　　　　　　'increment', 
　　　　　　　　'decrement', 
　　　　　　　　'clickOdd', 
　　　　　　　　'clickAsync', 
　　　　　　　　'addtwo' 
 　　　　　　]) 
　} 
</script>

 

　　main.js文件

import Vue from 'vue'
import App from './App.vue'
import store from './store/'   //引入store文件

new Vue({
  el: '#app',
  store,
  render: h => h(App)
});

 

　　actions.js文件

//这个文件是给methods:mapActions提供可调用方法的方法名,真正的运算在mutations里


import * as types from './types.js'
//作为一个命名空间,可以用types.xxx的方式使用types里的内容
export default {
  increment:({commit})=>{ //处理你要干什么,如异步请求,判断,流程控制,commit是个对象
    commit(types.INCREMENT);   //提交方法名
  },
  decrement:({commit})=>{
    commit(types.DECREMENT)
  },
  addtwo:({commit})=>{
    commit(types.ADDTWO)
  },
  //偶数才能点
  clickOdd:({
              commit,   //给mapActions提交的
              state     //状态数据
     })=>{

          if(state.mutations.count%2===0){
            commit(types.INCREMENT);
        }
  },

  //点击异步
  clickAsync:({commit})=>{
    new Promise((resolve)=>{
      setTimeout(function(){
        commit(types.INCREMENT);
        resolve();
      },1000)
    })
  }
}

 

　　getters.js文件

//这个文件是给mutations数据用的方法

export default {
  count:(state)=>{
    return state.count
  },
  getOdd:(state)=>{
    return state.count%2===0?'偶数':'奇数'
  }
}

 

　　index.js文件

//这个文件是汇总所有store下的文件的.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

import actions from './actions.js';
import mutations from './mutations.js'

export default new Vuex.Store({
  modules:{
    mutations
  },
  actions
});

 

　　mutations.js文件

//这个文件是给action提供可调用方法的,并且提交所有方法与数据到index.js

import {INCREMENT,DECREMENT,ADDTWO}from './types.js'
import getters from './getters.js'　　　　//调用getters那边的方法


const state={ 
  count:10
};

const mutations={
  [INCREMENT](state){ //处理状态(数据)变化　　加1
    state.count++;
  },
  [DECREMENT](state){ //处理状态(数据)变化  减1
    state.count--;
  },
  [ADDTWO](state){ //处理状态(数据)变化　　加2
    state.count+=2;
  }

};

export default{ //导出相关组件
  state,
  mutations,
  getters
}

 

　　type.js文件

//这里是给actions.js提供方法名

export const INCREMENT='INCREMENT';
export const DECREMENT='DECREMENT';
export const ADDTWO='ADDTWO';

 

说到底，最重要的还是

mapGetters, mapActions 这两兄弟

弄完如果老是报错说哪个方法找不到是unkown Type ,重新run dev一下就行了