Vuex详解

---

前言

本博客仅做学习笔记，如有侵权，联系后即刻更改

科普：

---

Vuex定义

在多个组件间共享状态的插件

专为Vue.js应用程序开发的状态管理模式

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

状态管理

定义

• 多个组件的共享变量存储在一个对象里
• 响应式

管理什么状态

多个状态，多个界面间的共享信息

• 用户的登陆状态、用户名称、头像、地理位置信息
• 商品的收藏、购物车的物品

单页面状态管理

• State: 共享信息、状态
• View: 视图层
• Actions: 用户的操作
  

Vuex状态管理

Devtools: Vue开发的浏览器插件

• 监听Mutations的Mutate修改State
• 只能监听同步操作
• 有异步操作时使用Actions:
  统一执行异步操作如网络请求等操作
  再交给Mutations时即为同步操作

Backed API: 后端API

使用步骤

1. main.js文件夹下

注册全局组件$store

2. store文件夹下相关属性配置

State、Getters、Mutations、actions、modules

3. 状态的相关操作

• 读取: this.$store.state
• 修改: this.$store.commit(‘mutation中方法’)
  这样修改状态Vuex可以明确的追踪状态的变化

Vuex核心概念

State

保存状态信息

• 单一状态数: 单一数据源
  一个项目里只创建一个store

Getters

类比Vue实例的computed属性

• 可以作为参数使用，即定义函数时传入的第二个参数
• 默认不能传递参数，只能让getters本身返回一个函数

Mutations

Vuex的store状态跟新唯一方式:提交Mutation， 因为devtools可以捕捉mutation快照，记录操作，方便调试和纠错 方法必须为同步操作，异步操作要放至actions当中
构成

分为两部分

• 事件类型(type)
• 回调函数(handler)
  第一个参数为state
  第二个参数(额外负载payload)

Dep -> [Watcher1,Watcher2]

state里面的属性都会被加入响应式系统中，
响应式系统监听属性的变化
当属性发生变化，通知所有包含该属性的地方，刷新界面

Mutations响应规则

• 在store初始化所需属性
• 增加新属性时
  方式一: 使用Vue实例的方法(set,delete)
  方式二: 新对象替换旧对象
  好像ES6语法直接增加新属性也会响应,那方式一就有点鸡肋了

类型常量

抽离type为一个文件
定义常量达到组件引用和函数定义的命名统一的目的

Actions

执行异步操作
Modules
Vue使用单一状态树
为了避免文件臃肿，将
每个模块都有state等属性

目录结构组织

store文件夹

• index文件
  state + 相关文件导入
• actions文件
• getters文件
• mutations

Vuex代码演练

要实现的话还要将HelloWorld.vue导入Vue实例当中

HelloWorld.vue

<template>

  <h2>{{$store.state.a.name}}</h2>
  <button @click="updateName">修改名字</button>
  <h2>{{$store.getters.fullname}}</h2>
  <h2>{{$store.getters.fullname2}}</h2>
  <h2>{{$store.getters.fullname3}}</h2>
  <button @click="aupdateName">异步修改名字</button>
  <h2>-----------moduleA----------</h2>
  <h2>{{$store.state.counter}}</h2>
  <button @click="add">+</button>
  <button @click="sub">-</button>
  <button @click="addCount(5)">+5</button>
  <h2>{{ $store.state.info }}</h2>
  <button @click="updateInfo">更新state</button>
  <h2>-----------getters---------</h2>
  <h2>{{$store.getters.powerCounter}}</h2>
  <h2>{{$store.getters.more19stu}}</h2>
  <h2>{{$store.getters.more19stuLength}}</h2>


</template>

<script>
import {Increment} from "@/store/Mutations-types";

export default {
  name: 'HelloWorld',
  methods: {
    add() {
      // this.$store.commit('increment')
      this.$store.commit(Increment)
    },
    sub() {
      this.$store.commit("decrement")
    },
    addCount(count) {
      // this.$store.commit("addCount",count)
      //es6变量增强型写法传入的参数为payload对象
      this.$store.commit({
        type: "addCount",
        count
      })
    },
    updateInfo() {
      // this.$store.commit("updateInfo")
      //异步操作要经过actions，将信息同步
      // this.$store.dispatch('updateState', {
      //   message: "信息",
      //   success: () => {
      //     console.log('执行成功1');
      //   }
      // })

      //promise通过dispatch传递
      this.$store
          .dispatch('updateState',{
            message: "promise实现异步操作1"
          }).then(res => {
        console.log('提交成功');
        console.log(res);
      })
    },
    updateName() {
      this.$store.commit('updateName', 'lisi');
    },
    aupdateName() {
      this.$store.dispatch('aupdateName');
    }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

store文件夹下index.js(未抽离文件版)

import { createStore } from 'vuex'
// import Vue from 'vue'
import {Increment} from "@/store/Mutations-types";

const moduleA = {
  state: {
    name: 'zhangsan'
  },
  getters: {
    fullname(state) {
      return state.name + '1111'
    },
    fullname2(state, getters) {
      return getters.fullname + '2222'
    },
    //获取根state属性
    fullname3(state,getters,rootState) {
      return getters.fullname2 + rootState.counter
    }
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload;
    }
  },
  actions: {
    //模块context对应该模块的mutation
    aupdateName(context) {
      setTimeout(() => {
        context.commit('updateName', 'wangwu')
      },1000)
      // setTimeout(() => {
      //   context.commit('updateName', 'wangwu')
      // },1000)
    }
  }
}
export default createStore({
  state: {
    counter: 33,
    students: [
      {name : 'zjc',age : 20},
      {name : 'zjc1',age : 18}
    ],
    info: {
        name: 'zjc',
        age: 20
      }
  },
  getters: {
    powerCounter(state) {
      return state.counter*state.counter
    },
    more19stu(state) {
      return state.students.filter(s => s.age >= 19)
    },
    more19stuLength(state,getters) {
      return getters.more19stu.length
    },
    moreAgestu(state) {
      return age => {
        return state.students.filter(s => s.age > age)
      }
    }
  },
  mutations: {
    [Increment](state){
      state.counter++
    },
    decrement(state){
      state.counter--
    },
    addCount(state,payload) {
      state.counter += payload.count
    },
    updateInfo(state) {
      state.info.name = 'zjc1'
      //devtools无法追踪异步函数，会出现数值不统一的问题
      //所以异步操作不能在Mutations当中
      // setTimeout(()=>{
      //   state.info.name = 'zjc2'
      // },1000)

      // state.info['height'] = '180'
      // Vue.set(state.info,'height', '180')
      // delete this.state.info.age
      // Vue.delete(state.info,'age')
    }
  },
  actions: {
    //context: 上下文,对应整个store对象
    // updateState(context,payload) {
    //   setTimeout(()=>{
    //     context.commit('updateInfo')
    //     console.log(payload.message);
    //     payload.success()
    //   },1000)
    // }

  //  promise
    updateState(context,payload) {
    return new Promise((resolve, reject) => {
      setTimeout(()=>{
        context.commit('updateInfo')
        console.log(payload);
        resolve('11')
      },1000)
    })
    }
  },
  modules: {
    a: moduleA
  }
})

总结

小小励志

有些事你现在不做，一辈子都不会做了。
如果你想做一件事，全世界都会为你让路。
《搭车去柏林》