vuex简单使用

vuex是一个数据集中管理的库，在数据量庞大并且涉及到多个组件之间交互使用数据的时候，他就可以派上用场，完美的解决了组件之间数据交互的赋杂性，大家都可以直接从vuex中访问到想要的数据

image.png

思维图中，state就表示公共的数据池，vue commponents就代表着组件，而actions责是修改数据的函数，但要注意的是他并不直接修改数据，而是通过调用mutations中的函数去修改数据
组件们通过dispatch去分发通知，actions中的函数则通过commit方法来调用mutations中的方法，具体用法如下方实例

首先安装vuex
npm install vuex
新建一个store.js文件用于创建store
在store中引入vuex

/*
vuex最核心的管理对象store
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

/**
 * 数据池
 * @type {{}}
 */
const state = {
  count: 0
}
/**
 *计算属性
 */
const getters = {

}
/**
 * 更改state中数据的方法
 * @type {{}}
 */
const mutations = {
}
/**
 * 通知mutations更改数据的方法
 * @type {{}}
 */
const actions = {
}

export default new Vuex.Store({
  state,  //状态对象，相当于一个数据池data
  mutations, // 包含多个更新state函数的对象
  actions, //包含多个对应事件回调函数的对象
  getters //包含多个getter计算属性函数的对象
})

同时需要在入口文件中将store映射到vue 实例上，以便后续的使用

import store from './store'

new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>',
  store // 注册上vuex的store: 所有组件对象都多一个属性$store  同$router一样以在每个组件中使用$store来访问store中的东西
               
})

如下一个简单的计数器，count是一个公共的数据，我们将他定义在store中
，在模板里通过$store.state.count来渲染页面   

  <div>
    <p>click {{$store.state.count}} times, count is {{evenOrOdd}}</p>

    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>


 computed: {
      evenOrOdd () {
        this.$store.getters.evenOrOdd  //调用store里的计算属性，不需要带括号，因为这里是去读取这个计算属性的值
      }
    },

    methods: {
      increment () {
        this.$store.dispatch('increment')  //通过dispatch去分发通知，
      },
      decrement () {
        this.$store.dispatch('decrement')
      },
      incrementIfOdd () {
        this.$store.dispatch('incrementIfOdd')
      },
      incrementAsync () {
        this.$store.dispatch('incrementAsync')
      }
    }

store.js

/**
 * 数据池
 * @type {{}}
 */
const state = {
  count: 0
}

/**
 *计算属性
 */
const getters = {
  //自带一个state，可供访问state中的数据
  evenOrOdd (state) {
    return state.count % 2 == 1 ? '奇数' : '偶数'
  }
}

/**
 * 更改state中数据的方法
 * @type {{}}
 */
const mutations = {
  increments(state,val){
    console.log(state,val)
    state.count++
  },
  decrements(state){
    state.count--
  },
  incrementIfOdds(state){
    state.count++
  },
  incrementAsyncs(state){
    state.count++
  }
}
/**
 * 通知mutations更改数据的方法
 * @type {{}}
 */
const actions = {
//actions中的方法会接收一个对象作为参数，commit是一个方法，state是store里的state
  increment({commit,state}){
    commit('increments',659)
  },
  decrement({commit,state}){
    commit('decrements')
  },
  incrementIfOdd({commit,state}){
    if (state.count%2==1){
      commit('incrementIfOdds')
    } else{
      alert('不是奇数')
    }
  },
  incrementAsync({commit}){
    setTimeout(()=>{
      commit('incrementAsyncs')
    },1000)
  }
}

store中的state和getters都是可以通过 this.store.getters 直接访问到的，，

而想要修改state中的值那么就需要一个点击事件来分发这个通知给actions

通过store提供的dispatch去分发通知，这个和$emit语法一样，传一个事件名称，后面还可以跟参数
 this.$store.dispatch('increment')  //通过dispatch去分发通知，

store.js的actions对象中，需要去定义这个方法，这个方法会
接收一个对象对位参数，对象里有commit方法和state，
state就是store.js中的state  commit就是去调用mutations中的方法

increment({commit,state}){
    commit('increments',659)
  },

而mutations对象中也要定义一个相应的方法来去修改state中的值

/**
 * 更改state中数据的方法
 * @type {{}}
 */
const mutations = {
  increments(state,val){
    console.log(state,val)
    state.count++
  },
}

总之，在组件中访问store中的数据和计算方法通过this.store.dispacth.xxx发送通知给actions中的方法 然后actions中的方法通过commit方法去调用mutations中的方法来修改数据， actions不修改数据，只是调用mutations来修改数据，真正修改数据的是mutations中的方法