Vuex 最简单的数量增减实例

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单配置

在src目录下新建

|- src
    |- vuex
        |-store.js

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
  },

  mutations: {
  }
})

export default store;

在main.js

import store from './vuex/store'

/* eslint-disable no-new */
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app-box')

用vuex 最简单的操作

20170914165134.png

在 vuex/store.js 里面定义一个数量count变量，以及increment()增加和decrease()减少的方法

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

Vue.use(Vuex);

const store = new Vuex.Store({

  state: {
    
    // 计算数量
    count: 0
  },
  
  mutations: {
    
    // 增加
    increment (state) {
      state.count ++
      console.log(state.count);

    },
    
    // 减少
    decrease (state) {
      state.count --
      console.log(state.count);
      
    },
  }
})

export default store;

调用页面.vue：

<template>
  <div class="main" >

    <!-- 数量 -->
    <!-- store.state 来获取状态对象 ，以及通过 store.commit 方法触发状态变更 -->
    <div class="num">{{this.$store.state.count}}</div>

    <!-- 操作 -->
    <x-button type="primary" mini @click.native="increment">增加数量</x-button>
    <x-button type="primary" mini @click.native="decrease">减少数量</x-button>
  </div>
</template>

script 操作方法

    /**
      操作vuex里面的加法
      store.commit 方法触发状态变更
      我们通过提交 mutation 的方式，而非直接改变 store.state.count
      是因为我们想要更明确地追踪到状态的变化
    */

    increment(){
      this.$store.commit('increment')
    },

    // 操作vuex里面的减法
    decrease(){
      this.$store.commit('decrease')
    },

推荐几个好的vue ui库
vux库地址
iviewui库地址
饿了么库地址

其中我引入了vux框架， 这是个vue - 移动端Vue非常棒的组件库，如果大家复制代码过去，如果没有引入vux库，记得直接把<x-button><x-button>改为<button></button>