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>
