vuex

一、 Vuex

1、vuex是什么

1. github 站点: https://github.com/vuejs/vuex
2. 在线文档: https://vuex.vuejs.org/zh-cn/
3. 简单来说: 对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)

2、vuex是状态自管理应用

• state: 驱动应用的数据源
• view: 以声明方式将 state 映射到视图
• actions: 响应在 view 上的用户输入导致的状态变化(包含 n 个更新状态的方法)
  

3、vuex核心概念和API

• state管理的状态对象

// 它的值是唯一的
const  xxx={
   name:initvalue
 }

• mutations中包含多个直接更新state的方法（回调函数）的对象
  只能写同步代码，不能写异步代码

const mutations = {
yyy	(state, {data1}) {
//	更新 state 的某个属性
}
}

• actions

1. 包含多个事件回调函数的对象
2. 通过执行: commit()来触发 mutation 的调用, 间接更新 state
3. 谁来触发: 组件中: $store.dispatch(‘action 名称’, data1) // ‘zzz’
4. 可以包含异步代码(定时器, ajax)

const actions = {
zzz ({commit, state}, data1) {
commit('yyy', {data1})
}
}

• getters

1. 包含多个计算属性(get)的对象
2. 谁来读取: 组件中: $store.getters.xxx const getters = {
   mmm (state) {
   return …}}

• modules

1. 包含多个 module
2. 一个 module 是一个 store 的配置对象
3. 与一个组件(包含有共享数据)对应

• 向外暴露 store 对象

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

vuex例子
首先搭好vue脚手架，下载好vuex，命令：npm install --save vuex
app.vue

<template>
  <div>
    <p>clisck {{count}} time,count is {{evenOrOdd}}</p>
    <button @click="add">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementifodd">increment if odd</button>
    <button @click="incrementasync">increment async</button>
  </div>
</template>
<script>
import {mapState,mapGetters,mapActions} from 'vuex'
  export default {
      computed:{
        //   evenOrOdd(){
        //       return this.$store.getters.evenOrOdd
        //   }
          ...mapState(['count']),
          ...mapGetters(['evenOrOdd'])
      },
      methods:{
        //   add(){
        //       //通知vuex增加
        //       this.$store.dispatch('add')//触发store中的actions调用
        //   },
        //   decrement(){
        //       this.$store.dispatch('decrement')
        //   },
        //   //如果是奇数在加一
        //   incrementifodd(){
        //       this.$store.dispatch('incrementifodd')
        //   },
        // //   异步增加
        //   incrementasync(){
        //       this.$store.dispatch('incrementasync')
        //   }
        //优化后的
        ...mapActions(['add','decrement','incrementifodd','incrementasync'])
      }
  }
</script>
<style>
</style>

store.js

// vuex的核心管理对象模块：store
import Vue from 'vue'
import Vuex from 'vuex'
// 声明使用
Vue.use(Vuex)
// 状态对象
const state={
    count:0
}
//包含多个更新state函数的对象
const mutations={
    //增加的更新状态
    ADD(state){
        state.count++
    },
    Decrement(state){
        state.count--
    },
    Incrementifodd(state){
            state.count++
    },
    Incrementasync(state){
            state.count++
    }
}
//包含多个对应事件回调函数的对象
const actions={
    //
    add({commit}){
        commit('ADD')
    },
    decrement({commit}){
        commit('Decrement')
    },
    incrementifodd({commit,state}){
        if(state.count%2===1)
        commit('Incrementifodd')
    },
    incrementasync({commit}){
        //action中可以执行异步代码
        setTimeout(()=>{
            commit('Incrementasync')
        },1000)
        
    }
   
}
//包含多个getter计算属性函数的对象
const getters={
    evenOrOdd(state){
        return state.count%2==0 ? '偶数' : '奇数'
    }
}
export default new Vuex.Store({
    state,//状态
    mutations,//包含多个更新state函数的对象
    actions,//包含多个对应事件回调函数的对象
    getters//包含多个getter计算属性函数的对象
})

• vue component 组件，有计算属性，方法等操作，通过$store.state,dispatch(‘方法名’)或…mapgetters拿到，store中的getters中的具体方法。
• 组件当中，利用$store.state或者mapState([‘具体定义的变量或对象名’])
• mutations中直接进行更新操作等，通过actions中的commit方法传到组件中，组件中在medhods中直接用$store.dispatch(‘具体方法名’)或者…mapActions([‘方法名’])。