Vuex详解

Vuex详解

1.认识Vuex

概念：

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

• 它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
• Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态管理到底是什么？

可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面，然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。

应用

大型项目会有多个状态多个界面的共享问题。

比如用户的登录状态、用户名称、头像、地理位置信息等等，比如商品的收藏、购物车中的物品等等。

2.Vuex的基本使用

安装略

基本使用：

//main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store' //
Vue.config.productionTip = false

new Vue({
  store,//
  render: h => h(App)
}).$mount('#app')

// /store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    }
  },
  actions: {
  },
  modules: {
  }
})

App.vue
<template>
  <div id="app">
  <img alt="Vue logo" src="./assets/logo.png">
  <p>{{count}}</p>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  computed:{
    count(){
      return this.$store.state.count
    }
  },
  methods:{
    increment(){
      this.$store.commit('increment')
    },
    decrement(){
      this.$store.commit('decrement')
    }
  }
}
</script>

3.Vuex的核心概念

• State
• Getters
• Mutation
• Action
• Module

4.State

State单一状态树

Vuex也使用了单一状态树来管理应用层级的全部状态

单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护

5.Getters

有时候，我们需要从store中获取一些state变异后的状态

我们可以在Store中定义getters

// /store/getters.js
const getters = {
    // 基本使用
    greaterAgesCount: state => {
        return state.students.filter(s => s.age >= 25).length
    },
    // getters调用
    greaterAgessStus: state => {
        return state.students.filter(s => s.age >= 25)
    },
    greaterAgesCount1: (state, getters) => {
        return getters.greaterAgessStus.length
    },
    // getters默认是不能传递参数的, 
    // 如果希望传递参数, 
    // 那么只能让getters本身返回另一个函数.
    stuByID: state =>{
        return id => {
            return state.students.find(s => s.id === id)
        }
    }
}
export default getters
// /store/index.js
import getters from './getters';
export default new Vuex.Store({ store })

<!-- 调用 -->
  <p>{{$store.state.students}}</p>
  <p>{{$store.getters.greaterAgesCount}}</p>
  <p>{{$store.getters.greaterAgesCount1}}</p>
  <p>{{$store.getters.stuByID(110)}}</p>

6.Mutation

Mutation状态更新

Mutation主要包括两部分：

• 字符串的事件类型（type）
• 一个回调函数（handler）,该回调函数的第一个参数就是state

mutation的定义方式：

通过mutation更新:

传递参数

在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数

参数被称为是mutation的载荷(Payload)

例子：

但是如果参数不是一个呢?

• 比如我们有很多参数需要传递.
• 这个时候, 我们通常会以对象的形式传递, 也就是payload是一个对象.
• 这个时候可以再从对象中取出相关的信息.

例子：

上面的通过commit进行提交是一种普通的方式

提交风格

Vue还提供了另外一种风格, 它是一个包含type属性的对象

Mutation中的处理方式是将整个commit的对象作为payload使用, 所以代码没有改变

响应规则

• Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新.
• 这就要求我们必须遵守一些Vuex对应的规则:
  • 提前在store中初始化好所需的属性.
  • 当给state中的对象添加新属性时, 使用下面的方式:
    方式一: 使用Vue.set(obj, ‘newProp’, 123)
    方式二: 用心对象给旧对象重新赋值

常量类型 – 概念

同步函数

通常情况下, 不要再mutation中进行异步的操作！！！

主要的原因是当我们使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照.
但是如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成.

7.Action

Action的基本定义

我们强调, 不要再Mutation中进行异步操作.但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.

Action的基本使用代码如下:

context是什么?
context是和store对象具有相同方法和属性的对象.
也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.
但是注意, 这里它们并不是同一个对象,
我们定义了actions, 然后又在actions中去进行commit, 这不是脱裤放屁吗?
事实上并不是这样, 如果在Vuex中有异步操作, 那么我们就可以在actions中完成了.

Action的分发

Action返回的Promise

8.Moudule

认识Moudule

Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
当应用变得非常复杂时,store对象就有可能变得相当臃肿.
为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutations、actions、getters等

Module局部状态

上面的代码中, 我们已经有了整体的组织结构, 下面我们来看看具体的局部模块中的代码如何书写.

• 我们在moduleA中添加state、mutations、getters
• mutation和getters接收的第一个参数是局部状态对象

Actions的写法

9.项目结构组织

10.代码仓库