Vue(三)【Vuex】

绝地灬酷狼 2021-06-26 16:06 379阅读 0赞

## 基本概念 ##

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

import Vue from 'vue'
    import Vuex from 'vuex'
    const store = new Vuex.Store({ 
      state: { 
        count: 0
      },
      mutations: { 
        increment (state) { 
          state.count++
        }
      }
    })

通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更

store.commit('increment')
    console.log(store.state.count) // -> 1

## State ##

相当于data

const state = { 
    	hidFoot: true,//foot是否显示，fasle:隐藏，true:显示
    	transitionName: '',//一级菜单nav切换动画
    	musicNavIsActive: 1,//音乐列表和排行表nav切换（初始值1：音乐列表nav是active状态）
    	persRecoLists:[],//个性推荐歌单
    }

## Getter ##

可以认为是 store 的计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

const store = new Vuex.Store({ 
      state: { 
        todos: [
          {  id: 1, text: '...', done: true },
          {  id: 2, text: '...', done: false }
        ]
      },
      getters: { 
        doneTodos: state => { 
          return state.todos.filter(todo => todo.done)
        }
      }
    })

通过属性访问

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

## Mutation ##

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，相当于事件

mutations: { 
      increment (state, payload) { 
        state.count += payload.amount
      }
    }
    store.commit('increment', { 
      amount: 10 //载荷传入对象
    })

另一种提交风格

store.commit({ 
      type: 'increment',
      amount: 10
    })

## Action ##

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。  
Action 可以包含任意异步操作。

const store = new Vuex.Store({ 
      state: { 
        count: 0
      },
      mutations: { 
        increment (state) { 
          state.count++
        }
      },
      actions: { 
        increment (context) { 
          context.commit('increment')
        }
      }
    })

## Module ##

const moduleA = { 
      state: () => ({  ... }),
      mutations: {  ... },
      actions: {  ... },
      getters: {  ... }
    }
    const moduleB = { 
      state: () => ({  ... }),
      mutations: {  ... },
      actions: {  ... }
    }
    const store = new Vuex.Store({ 
      modules: { 
        a: moduleA,
        b: moduleB
      }
    })
    store.state.a // -> moduleA 的状态
    store.state.b // -> moduleB 的状态