vue笔记记录四之vuex

vuex

1.vuex理解

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

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

2.多组件共享状态的问题
 1) 多个视图依赖于同一状态 
 2) 来自不同视图的行为需要变更同一状态 
 3) 以前的解决办法 
    a. 将数据以及操作数据的行为都定义在父组件 
    b. 将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递) 
 4) vuex 就是用来解决这个问题的

2.vuex的核心概念与API

1. state 
        a.vuex 管理的状态对象
        b.它应该是唯一的 
        const state = { xxx: initValue } 
2. mutations 
        a.包含多个直接更新 state 的方法(回调函数)的对象 
        b.谁来触发: action 中的 commit('mutation 名称') 
        c.只能包含同步的代码, 不能写异步代码 
        const mutations = { yyy (state, {data1}) { // 更新 state 的某个属性 } } 
3. actions 
        a.包含多个事件回调函数的对象 
        b.通过执行: commit()来触发 mutation 的调用, 间接更新 state 
        c.谁来触发: 组件中: $store.dispatch('action 名称', data1) // 'zzz' 
        d.可以包含异步代码(定时器, ajax) const actions = { zzz ({commit, state}, data1) { commit('yyy', {data1}) } } 
4. getters 
        a.包含多个计算属性(get)的对象 
        b.谁来读取: 组件中: $store.getters.xxx const getters = { mmm (state) { return ...} } 
5. modules 
        a.包含多个 module 
        b.一个 module 是一个 store 的配置对象 
        c.与一个组件(包含有共享数据)对应 
6. 向外暴露 store 对象 
       export default new Vuex.Store({ 
            state, 
            mutations, 
            actions, 
            getters }) 
7. 组件中 
       import {mapState, mapGetters, mapActions} from 'vuex' export default { computed: { ...mapState(['xxx']), ...mapGetters(['mmm']), }methods: mapActions(['zzz']) }{{xxx}} {{mmm}} @click="zzz(data)"
8. 映射 
       store import store from './store' new Vue({ store })        
9. store 对象 
       a.所有用 vuex 管理的组件中都多了一个属性$store, 它就是一个 store 对象 
       b.属性: state: 注册的 state 对象 getters: 注册的 getters 对象 3) 方法: dispatch(actionName, data): 分发调用 action

2.1 vuex_counter应用(vuex版本1)

1.在src目录下新建store.js文件并编写代码

/**
 * vuex的核心管理对象模块
 */
import Vue from 'vue'
import Vuex from 'vuex'

//声明使用vuex插件
Vue.use(Vuex);

export default new Vuex.Store({
    state, //状态对象
    mutations, //包含多个更新state函数的对象
    actions, //包含多个对应事件回调函数的对象
    getters //包含多个getter计算属性函数的对象
})
    
//状态对象
const state={
    count:0
}
//包含多个更新state函数的对象
const mutations={
    //增加的mutation
   INCREMENT(state){
       state.count++
   },
    //减少的mutation
     DECREMENT(state){
       state.count--
   },
}
//包含多个对应事件回调函数的对象
const actions={
    //1.增加的action
    increment({commit}){
        //提交mutation
        commit('INCREMENT')
    },
    //2.减少的action
    decrement({commit}){
        commit('DECREMENT')
    },
    //3.奇数增加的action
    incrementIfOdd({commit,state}){
        if(state.count%2===1){
            //提交增加的mutation
            commit('INCREMENT')
        }
    },
    //4.延迟1s的action
    incrementAsync({commit}){
        //在action中直接可以执行异步代码
        setTimeout(()=>{
            //提交增加的mutation
            commit('INCREMENT')
        },1000)
    }
}
//包含多个getter计算属性函数的对象
const getters={
      oddOrEven(state){ //不需要调用,只需要读取属性值
      return state.count%2===0?'偶数':'奇数'
    },
    count (state) { return state.count }
}

2.在main.js文件中

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  store    //所有的组件对象都多了一个属性 $store
})

3.在App.vue文件中

<template>
  <div id="app">
    <p>点击{{$store.state.count}}次, count is {{oddOrEven}}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="incrementIfOdd">odd +1</button>
    <button @click="incrementAsync">延迟1s +1</button>
  </div>
</template>

<script>
export default {
  computed:{
    oddOrEven(){
      return this.$store.getters.oddOrEven
    }
  },
  methods:{
    //1.增加1
    increment(){
      //在模板中写要带上this，this代表的是组件对象
      //通知vuex去增加1
      this.$store.dispatch('increment') //触发store中对应的action调用
    },
    //2.减少1
    decrement(){
      this.$store.dispatch('decrement') //触发store中对应的action调用
    },
    //3.奇数加1
   incrementIfOdd(){
       this.$store.dispatch('incrementIfOdd') //触发store中对应的action调用
    },
    //4.延迟1秒加1
   incrementAsync(){
       this.$store.dispatch('incrementAsyncd') //触发store中对应的action调用
    }
  }
}
</script>
<style>
</style>

2.2 vuex_counter应用(vuex版本2-优化)

main.js与store.js文件内容不变
在App.vue文件中

<template>
  <div id="app">
    <p>点击{{count}}次, count is {{oddOrEven}}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="incrementIfOdd">odd +1</button>
    <button @click="incrementAsync">延迟1s +1</button>
  </div>
</template>

<script>
import {mapGetters,mapActions,mapState} from 'vuex'
export default {
  computed:{
   ...mapState(['count']), //count返回值: count(){return this.$store.state.count}
   ...mapGetters(['oddOrEven']),//mapGetters返回值: oddOrEven(){return this.$store.getters.oddOrEven}
   oddOrEven(){
     return this.$store.getters.oddOrEven
   },
   count(){
     return this.$store.state.count
   }
  },
  methods:{
    ...mapActions(['increment','decremnent','incrementIfOdd','incrementAsync'])}
}
</script>
<style>
</style>

3.vuex结构图

4.渲染函数render