VueX学习讲解

今天来讲解作为vue全家桶之一的 VueX。

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具devtools扩展，提供了诸如零配置的time-travel调试，状态快照，导入等高级调试功能。 -------来自vuex官网

说白了，就是让多个组件共用一套数据，避免使用繁琐的的bus模式。

官网链接： vuex官网

components： 事件产生触发从而调用dispatch去执行actions
actions： 告诉 mutations 什么时候操作state
mutations ： 用于操作 state 数据
state ：“单一状态树” ---- 公用数据的存放处，被改变之后，调起render来重新渲染在components上的数据

store代码

	// store.js 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    global_index: "1",
    ifanimate: true
  },
  mutations: {
    changeInd(state,num){
      state.global_index = num
    },
    doanimate(){
      this.state.ifanimate = false
      console.log(this.state.ifanimate);
    }
  },
  actions: {
  },
  modules: {
  }
})

使用 this.$store.state 直接在.vue中引用数据
特殊情况可以配合computed()

	computed:{
		ifanimated(){
			return this.$store.state.ifanimated
		}
	}

使用方法改变sotre中的数据

 使用commit 调用 mutations 中的方法，第一个参数是方法名，第二个参数是需要传递的形参

	 methods: {
      handleSelect(keyPath) {
        this.$store.commit('changeInd',keyPath)
      }
    }

为了让代码更易维护和视觉提升, 于是将目录拆分; 首先看下拆分的目录结构:

具体代码::

// state.js
// 类似于组件中的data,给mutation 和 getter 提供数据
export default {
    count:0,
    name:'Juno',
    userInfo:{
        school:"清华"
    },
    age:18
}

// mutations.js
// mutations 类似于组件中的methods ,用于改变state中的值 
export default {
    changeNum(state,num){
        state.count = num;
    }
}

// getters.js
// getters 相当于 组件中的computed,能第一时间 对 state中的数据按照规则重新计算, 以减少在每个组件中的重复劳动
// getters 是不会改变state的数据值的,返回的是一个新的对象
export default {
	// fullName 就成功返回了 state中两个变量的组合值, 减少在多个组件中的重复劳动
    fullName(state){
        return `${state.name} - ${state.age}`
    }
}

// store.js

import Vuex from 'vuex'
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
export default (()=>new Vuex.Store({
    state:defaultState,
    mutations,
    getters
}))

来看下具体使用::

<template>
  <div id="app">
    <transition name="fade">
      <router-view></router-view>
      <!-- <router-view name="conA"> 只是一种小技巧 ,但是没实现 </router-view> -->
    </transition>
    <div class="storeClass">{{counter}} </div>
    <div class="storeClass"> {{fullName}} </div>

    <div class="storeClass"> {{userInfo}} </div>
    <button @click="changeStoreGetter"> changeStoreGetter </button>
    <router-link to="/a">helloWorld</router-link>

    <router-link to="/b">element</router-link>
  </div>
</template>

<script>
// 为了减少代码的赘述:
//  mapState 其实就是 this.$store.state 
//  mapGetters 其实就是 this.$store.getters
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'App',
  data () {
    return {

    }
  },
  methods: {
    changeStoreGetter () {
      this.$store.state.age = 222;
    }
  },
  computed: {
    //  
    // 此处直接写为   ...mapState(['mapState']) ,也是可以的
    // 但是如果对于一个object  那么如此的产出则是一个字符串,不利于我们使用点号运算符 如 userInfo.username;    ---- 更新: 测试之后 居然发现也是可以使用的............ 0.0

    ...mapState({
      counter: (state) => state.count,
      userInfo: 'userInfo'
    }),
    ...mapGetters(['fullName'])
    // count () {
    //   return this.$store.state.count
    // },
    // fullName () {
    //   return this.$store.getters.fullName
    // },
  },
  mounted () {
    console.log('storeCount', this.$store)
    let numIs = 2;
    setInterval(() => {
      this.$store.commit('changeNum', numIs++)
    }, 1000)
  }
}
</script>

<style>
.storeClass {
  color: red;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>