vuex使用——开头

什么是vuex

“Vuex是一个专为vue.js应用程序开发的状态管理模式。它解决了组件之间同一状态的共享问题。因为它采用的是集中式存储管理应用的所有组件状态,所以组件就可以和store通讯了。其实Vuex就是用来管理组件之间通信的一个插件”

 

配置vuex

1. src下创建store文件夹——新建index.js

2. index.js:

   import Vue from 'vue'
   import Vuex from 'vuex'
   Vue.use(Vuex)
   //准备actions -- 响应组件中的动作
   const actions = {
   ​
   }
   ​
   //准备mutations -- 用于操作数据
   const mutations = {
   ​
   }
   ​
   //准备state -- 用于存储数据
   const state = {
   ​
   }
   ​
   //创建并暴露store
   export default new Vuex.Store({
       actions,
       mutations,
       state
   })

需要在import store之前use(vuex)

1. 在main.js中引用 store

   import store from './store/index'
   ​
   new Vue({
       el: 'xxx',
       store:store   //引用一下
   })

2. 配置并使用vuex之后，VC VM上就会出现 $store 其中包含了：

   • commit

   • dispatch

   • actions

   • mutations

   • state

1. 使用：

/*
通过this.$store.dispatch / this.$store.commit 调用
当使用dispatch调用的action方法没有什么逻辑时，可以直接使用commit调用mutations中的方法
*/
methods: {
    increase() {
      this.$store.commit('ADD',this.addNum)
    },
    decrease() {
      this.$store.commit('LESS',this.addNum)
​
    },
    increaseOdd() {
      if (this.$store.state.num %2){
        this.$store.dispatch('AddOdd',this.addNum)
      }
    },
    increaseWait() {
      setTimeout(() => {
        this.$store.dispatch('AddWait',this.addNum)
      },500)
    }
  }

1. 计算属性getters

//准备getters -- 类似于计算属性
const getters = {
    bignum(state){
        return state.num * 10
    }
}