Vuex 状态管理

Vue 组件内的状态管理流程

Vue 核心功能是数据驱动和组件化
基于组件化开发提高可维护性，复用性
状态管理

state：驱动应用的数据源
view：以生命的方式将state映射到视图
actions：响应在biew上的用户输入导致的状态变化

Vue 组件间通信

父组件给子组件传值：子组件通过props接收，父组件给子组件通过传递相应属性传值
子组件给父组件传值 ：子组件通过$emit()调用父组件方法
不相干组件之间传值：Vuex或者eventbus方式，ref

父子传值
父组件

<template>
  <div>
    <h1>Props Down Parent</h1>
    <child title="My journey with Vue"></child>
  </div>
</template>

<script>
import child from './01-Child'
export default {
  components: {
    child
  }
}
</script>

子组件
<template>
  <div>
    <h1>Props Down Child</h1>
    <h2>{{ title }}</h2>
  </div>
</template>

<script>
export default {
  // props: ['title'],
  props: {
    title: String
  }
}
</script>

子组件传递父组件

子组件
<template>
  <div>
    <h1 :style="{ fontSize: fontSize + 'em' }">Props Down Child</h1>
    <button @click="handler">文字增大</button>
  </div>
</template>

<script>
export default {
  props: {
    fontSize: Number
  },
  methods: {
    handler () {
      this.$emit('enlargeText', 0.1)
    }
  }
}
</script>

父组件
<template>
  <div>
    <h1 :style="{ fontSize: hFontSize + 'em'}">Event Up Parent</h1>

    这里的文字不需要变化

    <child :fontSize="hFontSize" v-on:enlargeText="enlargeText"></child>
    <child :fontSize="hFontSize" v-on:enlargeText="enlargeText"></child>
    <child :fontSize="hFontSize" v-on:enlargeText="hFontSize += $event"></child>
  </div>
</template>

<script>
import child from './02-Child'
export default {
  components: {
    child
  },
  data () {
    return {
      hFontSize: 1
    }
  },
  methods: {
    enlargeText (size) {
      this.hFontSize += size
    }
  }
}
</script>

不相干组件传值

eventBus方式：创建一个公共的Vue实例，实例的作用是作为事件中心

eventbus.js

import Vue from 'vue'
export default new Vue()

a组件：在Vue实例上挂载emit自定义事件，通过value传递数值

<template>
  <div>
    <h1>Event Bus Sibling01</h1>
    <div class="number" @click="sub">-</div>
    <input type="text" style="width: 30px; text-align: center" :value="value">
    <div class="number" @click="add">+</div>
  </div>
</template>

<script>
import bus from './eventbus'

export default {
  props: {
    num: Number
  },
  created () {
    this.value = this.num
  },
  data () {
    return {
      value: -1
    }
  },
  methods: {
    sub () {
      if (this.value > 1) {
        this.value--
        bus.$emit('numchange', this.value)
      }
    },
    add () {
      this.value++
      bus.$emit('numchange', this.value)
    }
  }
}
</script>

<style>
.number {
  display: inline-block;
  cursor: pointer;
  width: 20px;
  text-align: center;
}
</style>

b组件：在Vue实例上注册事件

<template>
  <div>
    <h1>Event Bus Sibling02</h1>

    <div>{{ msg }}</div>
  </div>
</template>

<script>
import bus from './eventbus'
export default {
  data () {
    return {
      msg: ''
    }
  },
  created () {
    bus.$on('numchange', (value) => {
      this.msg = `您选择了${value}件商品`
    })
  }
}
</script>

<style>

</style>

其他常见方式
$root
$parent
$children
$refs
可以通过这些属性获取父子组件跟组件对象上的成员，实现组件间的通信
但是这些都是不太被推荐的实现方法，比较适合项目小，或者开发自定义组件适合使用到
ref方式
在普通HTML标签使用ref，获取到的是DOM
在组件标签使用ref，获取到的是组件的实例
a组件

<template>
  <div>
    <h1>ref Child</h1>
    <input ref="input" type="text" v-model="value">
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    focus () {
      this.$refs.input.focus()
    }
  }
}
</script>

b组件

<template>
  <div>
    <h1>ref Parent</h1>

    <child ref="c"></child>
  </div>
</template>

<script>
import child from './04-Child'
export default {
  components: {
    child
  },
  mounted () {
    this.$refs.c.focus() //refs.c获取到的子组件对象，可以通过对象访问对应的属性和方法
    this.$refs.c.value = 'hello input'
  }
}
</script>

Vuex

什么是vuex

Vuex是专门为Vue.js设计的状态管理库
Vuex采用集中式的方式存储需要共享的状态
Vuex的作用是进行状态管理，解决复杂组件通信，数据共享
Vuex集成到了devtools中，提供了time-travel时光旅行历史回滚功能

什么情况下使用Vuex

非必要情况不要使用Vuex
大型的单页应用程序
多个试图依赖同一状态
来自不同的视图行为需要变更统一状态

Vuex的核心概念

Store：仓库，包含应用中的大部分状态
State：状态，保存在Store中
Getter：Vuex的计算属性，可以对结果进行缓存
Mutation：状态的变化必须通过提交mutation进行，接收state，处理同步任务
Action：进行异步操作，提交mutation
Module：模块，可以对模块进行拆分，每一个模块拥有自己的state，mutation，action…

Vuex的使用

import Vue from 'vue'
import Vuex from 'vuex'
import products from './modules/products'
import cart from './modules/cart'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    count: 0,
    msg: 'Hello Vuex'
  },
  getters: {
    reverseMsg (state) {
      return state.msg.split('').reverse().join('')
    }
  },
  mutations: {
    increate (state, payload) {
      state.count += payload
    }
  },
  actions: {
    increateAsync (context, payload) {
      setTimeout(() => {
        context.commit('increate', payload)
      }, 2000)
    }
  },
  modules: {
    products,
    cart
  }
})

组件读取，设置值

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    <!-- count：{{ $store.state.count }} <br>
    msg: {{ $store.state.msg }} -->
    <!-- count：{{ count }} <br>
    msg: {{ msg }} -->

    count：{{ num }} <br>
    msg: {{ message }}

    <h2>Getter</h2>
    <!-- reverseMsg: {{ $store.getters.reverseMsg }} -->
    reverseMsg: {{ reverseMsg }}

    <h2>Mutation</h2>
    <!-- <button @click="$store.commit('increate', 2)">Mutation</button> -->
    <button @click="increate(3)">Mutation</button>

    <h2>Action</h2>
    <!-- <button @click="$store.dispatch('increateAsync', 5)">Action</button> -->
    <button @click="increateAsync(6)">Action</button>

    <h2>Module</h2>
    <!-- products: {{ $store.state.products.products }} <br>
    <button @click="$store.commit('setProducts', [])">Mutation</button> -->
    products: {{ products }} <br>
    <button @click="setProducts([])">Mutation</button>

    <h2>strict</h2>
    <button @click="$store.state.msg = 'Lagou'">strict</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  computed: {
    // count: state => state.count
    // ...mapState(['count', 'msg'])
    ...mapState({ num: 'count', message: 'msg' }),
    ...mapGetters(['reverseMsg']),
    ...mapState('products', ['products'])
  },
  methods: {
    ...mapMutations(['increate']),
    ...mapActions(['increateAsync']),
    ...mapMutations('products', ['setProducts'])
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Vuex的严格模式
开启严格模式，如果直接修改state数据会抛出错误，必须通过mutation
strict: process.env.NODE_ENV !== ‘production’,

Vuex的插件使用

const myPlugin = store => {
  // 当store 初始化调用
  store.subscribe((mutation, state) => {
  // 每次mutation 之后调用
  // mutation 的格式为{type,payload}
    if (mutation.type.startsWith('cart/')) {
      window.localStorage.setItem('cart-products', JSON.stringify(state.cart.cartProducts))
    }
  })
}

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  //  products,
    //cart
  },
  plugins: [myPlugin]
})

模拟Vuex

可以通过模拟Vuex的实现，了解其中的原理
需要实现其中的install方法和store类

基本结构

let _Vue = null // 存储vue实例
class Store{}
function install(Vue){
  _Vue = Vue
}
export default{
  Store,
  install
}

Vuex 是Vue的一个插件，所有的插件都拥有install方法
install实现
install需要把Vue实例中的store对象注入到原型上的$store
方便所有组件的 $ store都在访问，共享状态

function install(Vue){
   _Vue = Vue
   _Vue.mixin({
     beforeCreate(){
         _Vue.prototype.$store = this.$options.store
      }
   })
}

Store类

class Store {
  constructor (options) {
    const {
      state = {},
      getters = {},
      mutations = {},
      actions = {}
    } = options
    this.state = _Vue.observable(state) // 为数据增加响应式处理
    this.getters = Object.create(null) 
    Object.keys(getters).forEach(key => {
      Object.defineProperty(this.getters, key, {
        get: () => getters[key](state)
      })
    })
    this._mutations = mutations
    this._actions = actions
  }

  commit (type, payload) {
    this._mutations[type](this.state, payload)
  }

  dispatch (type, payload) {
    this._actions[type](this, payload)
  }
}