vuex实战

vuex是一个专门为vue.js设计的集中式状态管理架构，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex可以方便进行组件（页面）之间的传值
vuex可以对数据持久化

1、安装vuex

进入根目录
npm install vuex --save

2、新建store.js文件

新建store.js文件
在此文件中写入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//增加一个常量
const state = {
count: 1
}
//向外暴露store
export default new Vuex.Store({
state,
mutations
})

3、在main.js 中导入store.js文件

import store from './module/store'
在main.js的new Vue中加入store

4、在组件中使用store

获取state数值方法
this.$store.state.count

5、在组件中修改store中的数值

在store.js文件中添加Mutations

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//增加一个常量
const state = {
count: 1
}
//定义 mutations ，处理状态的改变
const mutations = {
add (state) {
  ++state.count
},
reduce (state) {
  --state.count
}
}
//向外暴露store
export default new Vuex.Store({
state,
//此处要添加mutations
mutations
})

在组件中修改state的数值
调用定义在Mutations的方法
$store.commit('reduce')

6、vuex的getter过滤

vuex提供了getter，通过此可以在获取state值得过程中对state的数据进行计算然后再取值。
在store.js加入getters

const getters = {
getCount (state, date) {
  state.count += date
  return state.count
}
}
export default new Vuex.Store({
state,
mutations,
getters
})

获取getter的值
$store.getters.getCount

7、vuex的actions

actions和Mutations差不多，actions可以异步的改变state状态（但不能直接操作State），而Mutations是同步改变状态，actions是可以调用Mutations里的方法的。
在store.js加入actions

     const mutations = {
  add1 (state, date) {
    state.count += date
    console.log(state.count)
  }
}
const actions = {
  actionAdd1 (context) {
    context.commit('add1', 5)
  },
  actionAdd2 ({commit}, date) {
    commit('add1', date)
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

在组件中使用action
$store.dispatch('actionAdd2',10)