vuex

vuex 是一个专为vue.js 应用程序开发的状态管理器，在main.js引入store 注入，在new Vue中挂载到vue实例中。

new Vue({
   router,
   store,      // store 和 router一样，将我们创建的Vuex实例挂载到这个vue实例中
   render: h=> h(App)
}).$mount('#app')

 

它采用集中式存储管理应用所有组件的状态，并且以相应的规则保证状态以一种可以预测的方式发生变化。

 

vuex中有五种默认的基本属性

1.  state:   vuex 的基本数据，用来存储变量, 相当于vue中的data

2.  mutations： 更改vuex中state的状态唯一方法, 是同步的， 在组件中使用this.$store.commit('',parmas).  这个和我们组件中的自定义事件类似

3.  actions:   actions提交的就是mutations，而不是直接变更状态，异步操作。  在组件中使用this.$store.dispath("")

4.  getters:   对数据获取之前的再次编译，可以理解为store的计算属性。我们在组件中使用$store.getters.fun()

5.  module

 

 

案例

 

 

app.vue

<template>
  <div id="app">
    <div class="hello">
      <h3>
        {{$store.state.count}}
      </h3>
      <div>同步操作 </div>
      <div>
          <button @click="handleAddClick(10)">增加</button>
          <button @click="handleReduceClick(10)">减少</button>
      </div>
      <div>异步操作</div>
      <div>
        <button @click="handleActionsAdd(10)">异步增加</button>
        <button @click="handleActionsReduce(10)">异步减少</button>
      </div>
      <h4>{{count}}</h4>  // 加上这个 异步减少失效有待研究
    </div>
  </div>
</template>

<script>
// 方法二 简便写法 {mapState, mapMutations, mapActions, mapGetters}
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
export default {
  name: 'App',
  methods: {
    // 方法一

    // handleAddClick(n) {
    //   this.$store.commit('mutationsAddCount',n)
    // },
    // handleReduceClick(n) {
    //   this.$store.commit('mutationsReduceCount',n)
    // },
    // // actions 异步操作，用来提交mutations
    // handleActionsAdd(n) {
    //   this.$store.dispatch('actionsAddCount',n) 
    // },
    // handleActionsReduce(n) {
    //   this.$store.dispatch('actionsReduceCount',n)
    // }
    ...mapMutations({
      handleAddClick: 'mutationsAddCount',
      handleReduceClick: 'mutationsReduceCount'
    }),
    ...mapActions({
      handleActionsAdd: 'actionsAddCount',
      handleActionsReduce: 'actionsReduceCount'
    })
    
  },
  computed: {
    count() {
      return this.$store.getters.gettersCount
    }
  }
}


</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>

 

 

store.js

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

Vue.use(Vuex)

const state = {
    count: 0
}
/**
 * mutations 里面放置的是我们操作state对对象属性的方法 同步操作
 */
const mutations = {
    mutationsAddCount (state, n = 0) {
        return (state.count += n)
    },
    mutationsReduceCount(sate, n = 0){
        return (state.count -= n)
    }
}


/**
 * acitons 是异步操作 action 是提交的mutation
 */
const actions = {
    actionsAddCount(context, n= 0) {
        console.log(context)
        return context.commit('mutationsAddCount',n)  // 注意  mutationsAddCount 不要写错了
    },
    actionsReduceCount({commit}, n = 0) {
        return commit('mutationsReduceCount',n)
    }

}
/**
 * 
 *  getters 是用来获取我们的sate，因为它算是state的一个计算属性
 */
const getters = {
    gettersCount(state) {
        return (state.count += 10)
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})