vuex 状态管理模式

vuex: 集中式管理数据

官网: http://vuex.vuejs.org/

流程图

　　Actions事件(行为) -- Mutations突变 -- State状态

 

安装：npm install vuex --save

vuex提供了两个非常靠谱方法

　　mapActions 管理所有事件(行为) -- 将所有的methods打包

　　mapGetters 获取数据

 

1.项目结构

 

2.main.js

import Vue from 'vue'
import App from './App'
import router from './router'

import store from './store.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

3.App.vue

<template>
  <div id="app">
    <h3>welcome vuex-demo</h3>
    <input type="button" value="增加" @click="increment">
    <input type="button" value="减少" @click="decrement">
    <input type="button" value="偶数才能点击+" @click="clickOdd">
    <input type="button" value="点击异步" @click="clickAsync">

    <div>
      现在的数字为：{{count}}，它现在是{{getOdd}}
    </div>
  </div>
</template>

<script>
  /**
   * 引入 vuex 中的方法
   * mapGetters 获取数据
   * mapActions 管理所有事件(行为)
   */
  import { mapGetters, mapActions } from 'vuex'

  export default{
    // 计算属性
    computed:mapGetters([ // 获取数据
      'count', // 调用vuex的getters中的count方法
      'getOdd'
    ]),
    methods:mapActions([ // 管理事件
      'increment', // 点击事件,调用vuex的ations中的increment方法
      'decrement',
      'clickOdd',
      'clickAsync'
    ])
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4.store.js

/**
 * 状态管理模式
 * store 存储 数据
 */
// 引入 vue
import Vue from 'vue'
// 引入 vuex
import Vuex from 'vuex'

Vue.use(Vuex);

// 步骤二：定义数据
var state = {
  count:10
}

// 步骤三：定义突变
const mutations = { // 处理状态(数据)变化
  increment(state) { // 此处的state即为上方定义的state
    state.count++;
  },
  decrement(state) {
    state.count--;
  }
}

// 步骤一：定义方法(行为)
const actions = { // actions主要处理你要干什么,例如:异步请求、判断、流程控制
  increment:({commit}) => { // 解钩
    // 提交到mutations
    commit('increment')
  },
  decrement:({commit}) => {
    // 提交到mutations
    commit('decrement')
  },
  clickOdd:({commit,state}) => { // 参数1：commit对象(专门用于mutation提交), 参数2：当前state
    if(state.count % 2 == 0){
      commit('increment');
    }
  },
  clickAsync:({commit}) => { // 异步请求
    // 定义 Promise对象
    new Promise((resolve) => {
      setTimeout(function(argument) {
        // 提交到mutation
        commit('increment');

        // 调用成功的回调resolve,让程序继续执行
        resolve();
      },1000);
    })
  }
}

// 步骤四：定义数据获取
const getters = {
  count(state){
    return state.count;
  },
  getOdd(state){
    return state.count % 2 == 0 ? '偶数' : '奇数';
  }
}

// 步骤五：需要导出Store对象
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

5.效果图

 

6.官方推荐项目结构

（1）main.js

import Vue from 'vue'
import App from './App'
import router from './router'

import store from './store/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

（2）App.vue

<template>
  <div id="app">
    <h3>welcome vuex-demo</h3>
    <input type="button" value="增加" @click="increment">
    <input type="button" value="减少" @click="decrement">
    <input type="button" value="偶数才能点击+" @click="clickOdd">
    <input type="button" value="点击异步" @click="clickAsync">

    <div>
      现在的数字为：{{count}}，它现在是{{getOdd}}
    </div>
  </div>
</template>

<script>
  /**
   * 引入 vuex 中的方法
   * mapGetters 获取数据
   * mapActions 管理所有事件(行为)
   */
  import { mapGetters, mapActions } from 'vuex'

  export default{
    methods:mapActions([ // 管理事件
      'increment', // 点击事件,调用vuex的ations中的increment方法
      'decrement',
      'clickOdd',
      'clickAsync'
    ]),
    // 计算属性
    computed:mapGetters([ // 获取数据
      'count', // 调用vuex的getters中的count方法
      'getOdd'
    ])
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

（3）store 文件夹中 index.js

/**
 * 步骤一：store 入口
 */
// 引入 vue
import Vue from 'vue'
// 引入 vuex
import Vuex from 'vuex'

Vue.use(Vuex);

// 管理事件(行为)
import actions from './actions'
// 突变
import mutations from './mutations'

// 导出 Store对象
export default new Vuex.Store({
  actions,
  modules:{ // 因为 mutations 包含两个,所以用modules(模块)导出
    mutations
  }
});

（4）store 文件夹中 actions.js

/**
 * 步骤二：事件(行为)
 * actions主要处理你要干什么,例如:异步请求、判断、流程控制
 */

// 引入 状态(类型),用于提交到mutation
import * as types from './types'

export default{
  increment:({commit}) => {
    // 提交到mutations
    commit(types.INCREMENT);
  },
  decrement:({commit}) => {
    // 提交到mutations
    commit(types.DECREMENT);
  },
  clickOdd:({commit,state}) => { // 参数1：commit对象(专门用于mutation提交), 参数2：当前state
    if (state.mutations.count % 2 == 0) {
      // 提交到mutations
      commit(types.INCREMENT);
    }
  },
  clickAsync:({commit}) => { // 异步请求
    // 定义 Promise对象
    new Promise((resolve) => {
      setTimeout(function() {
        // 提交到mutation
        commit(types.INCREMENT);

        // 调用成功的回调resolve,让程序继续执行
        resolve();
      },1000);
    })
  }
}

（5）store 文件夹中 types.js

/**
 * 步骤三：定义 状态(类型)
 * 使用 const 定义,默认不可改变
 */
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

（6）store 文件夹中 mutations.js

/**
 * 步骤四：突变
 * mutations 处理状态(数据)变化
 */

import {
  INCREMENT,
  DECREMENT,
} from './types'

// 引入 获取数据
import getters from './getters'

// 定义数据
const state = {
  count:20
}

/**
 * 突变
 * 接收 commit 提交的值
 */
const mutations = {
  // INCREMENT是一个变量
  [INCREMENT](state){ // 此处的state即为上方定义的state
    state.count++;
  },
  [DECREMENT](state){
    state.count--;
  }
}

// 导出
export default {
  state,
  mutations,
  getters
}

（7）store 文件夹中 getters.js

/**
 * 步骤五：获取数据
 */
export default {
  count:(state) => {
    return state.count;
  },
  getOdd:(state) => {
    return state.count % 2 == 0 ? '偶数' : '奇数';
  }
}

 

效果图