Vue Vuex 6

1 Vuex 概念

1 理解: 
  1 Vuex == 全局状态管理 == 全局数据管理 == Vue 开发的标配   (基于 Flux数据架构思想而来的)
  2 说白了就是创建一个, 所有项目组件都可以访问, 的存放数据的全局对象
  3 遵循单向流数据规范: 只在组件中读取数据, 不在组件中修改数据

2 作用: 
  1 达到所有项目组件共享数据的效果
  2 只要 state中的数据发生改变, 所有用到该数据的组件都会动态同步 
  3 性能优化 (切换组件时, 把已请求的数据缓存下来, 切回去的时就可以直接展示数据)

3 Vuex 和 localStorage 的区别: 
  1 vuex
    1 数据存储在内存中  //全局对象中, 效率高, 速度快
    2 刷新页面时数据将会丢失
    3 用于组件之间共享数据
  2 localStorage
    1 数据存储在本地
    2 刷新页面时数据不会丢失
    3 用于多页面之间共享数据

2 Vuex 环境配置

1 安装: npm install vuex --save   (CLI)

2 配置文件: src/store/index.js  (CLI)
  import Vue from 'vue' 
  import Vuex from 'vuex'
  Vue.use(Vuex)  //把vuex注册到vue中
  export default new Vuex.Store({
    
     state: {
    
    }, mutations{
    
    }, actions{
    
    }, getters{
    
    }, modules{
    
    } })
  
3 注册: (CLI)
  import store from './store.js'
  new Vue({
    
    store,})  //注册到Vue实例配置项上

3 Vuex 核心概念

1 state: {
    
    }
---------------------------------------------------------------------------------------
1 作用: 存储全局数据的位置  //只读取不修改

2 格式: state: {
    
    name: "zhang", age: 25} 

3 组件访问: this.$store.state.name  //访问的时候可以修改, 但是不应该这么做 (规范)
---------------------------------------------------------------------------------------


2 mutations: {
    
    }
---------------------------------------------------------------------------------------
1 作用: 提供修改 state 中数据的方法  //管理同步操作

2 格式: mutations: {
    
     hh (state, data) {
    
     state.name = data }}

3 参数: 
  state: 就是 Vuex 中的 state  (存储数据的对象)
  data: 是用户调用方法, 传过来的参数

4 组件访问(调用): this.$store.commit("hh", data)  //定义的方法名, 传递的实参
---------------------------------------------------------------------------------------


3 actions: {
    
    }
---------------------------------------------------------------------------------------
1 作用: 
  1 常用于发起, 数据请求的位置  //管理异步操作
  2 调用 mutations 中的修改数据的方法: store.commit( "hh", data)

2 格式: actions: {
    
    hh (store, data) {
    
    store.commit("hh", data)}} 

3 参数: 
  store: 
  data: 

4 组件访问 (调用): this.$store.dispatch("kk", data)  //定义的方法名, 传递的实参
---------------------------------------------------------------------------------------


4 getters: {
    
    }
---------------------------------------------------------------------------------------
1 作用: 处理数据并返回处理后的数据  //可以看做全局计算属性

2 格式: getters: {
    
    hh (state, getter) {
    
    return state.name + 'zhang'}

3 参数: 
  state: 
  getter: 

4 组件访问 (调用): {
    
    {
    
    this.$store.getters.hh}}   //同样不用加, 小括号

---------------------------------------------------------------------------------------


5 modules: {
    
    }
---------------------------------------------------------------------------------------
1 作用: 在数据很多的情况下, 为了方便维护; 在该对象中开辟多个命名空间 (), 来划分模块        

2 常规目录结构

  // 把 Vuex 注册到 Vue 中
  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)

  // 一级数据模块, 通过外部模块来存储
  import state from './state'
  import actions from './actions'
  import mutations from './mutations'

  // 不同命名空间的模块, 通过不同的外部文件来存放
  import good from './modules/good.js'
  import hh from './modules/hh.js'

  // Vuex 抛出到全局
  export default new Vuex.Store({
    
    
    state,
    mutations,
    actions,
    modules: {
    
     good}
  })

3 注意: 
  1 一级数据模块外部文件: 
    export default {
    
    msg: [1, 2, 3]}  //导出的是一个对象
    
  2 外部单个命名空间: 
    export default{
    
    
      namespaced: true,   // 开启命名空间
      state: {
    
    },
      actions: {
    
    },
      mutations: {
    
    }
    }

  3 目录结构
    store  // Vuex 的配置文件
      modules  // 放置命名空间文件夹
        good.js  //外部的单个命名空间模块
        hh.js
      index.js  // 外部的一级数据模块
      state.js
      mutations.js
      actions.js
---------------------------------------------------------------------------------------

4 辅助函数

1 作用: 更简洁的操作 Vuex

2 需要把 Vuex 用到的模块, 映射到当前组件中
---------------------------------------------------------------------------------------
import {
    
     mapState, mapMutations, mapActions, mapGetters } from "vuex"

// 单文件组件的, 配置项中, 映射数据的各种方式, 以及位置
computed: {
    
    
  ...mapState(["msg1", "mag2"])  //映射外层数据
  ...mapState("home", ["msg1", "mag2"])  //映射内层数据
  ...mapState({
    
    msg1: "msg1", msg2: "msg2"})  //获取外层数据 + 且自定义命名
  ...mapState({
    
    msg1: state => state.home.msg1,})  //获取内层数据 + 自定义命名

  ...mapGetters(["hh1", "hh2"])   // 映射外层数据
  ...mapGetters(["home/hh1", "home/hh2"])   //映射内层数据
  ...mapGetters("home", ["hh1", "hh2"])  // 映射内层数据
  ...mapGetters({
    
    hh1: "hh1", hh2: "hh2"})  // 外层 + 自定义命名
  ...mapGetters({
    
    hh1: "home/hh1", hh2: "home/hh2"})  // 内层 + 自定义命名
}

methods: {
    
    
  ...mapMutations(["hh1", "hh2"])  //映射外层方法
  ...mapMutations(["home/hh1", "home/hh2"])   //映射内层方法
  ...mapMutations({
    
    hh1: "hh1", hh2: "hh2"})   //映射外层方法 + 自定义命名
  ...mapMutations({
    
    hh1: "home/hh1", hh2: "home/hh2"})  //映射内层数据 + 自定义命名

  // 它的方法同上
  ...mapActions(["hh1", "hh2"])  //映射外层方法
  ...mapActions(["home/hh1", "home/hh2"])   //映射内层方法
  ...mapActions({
    
    hh1: "hh1", hh2: "hh2"})   //映射外层方法 + 自定义命名
  ...mapActions({
    
    hh1: "home/hh1", hh2: "home/hh2"})  //映射内层数据 + 自定义命名
}

注意: 
  1 state + getters 要在计算属性 computed 中映射
  2 mutations + actions 要在 methods 中映射
  3 映射数据, 以及组件数据, 的属性重名问题
  4 上面映射配置中: home 表示一个命名空间, hh1 + hh2 表示方法
  5 上面映射配置中: 内层数据表示, 命名空间中的数据; 外层数据表示, 一级数据模块的数据
---------------------------------------------------------------------------------------

3 单文件组件中使用 (基于上面的映射)
---------------------------------------------------------------------------------------
1 state: this.msg1
2 getters: this.msg2
3 mutations: this.a1(data)
4 actions: this.a2(data)
---------------------------------------------------------------------------------------

5 简单业务逻辑描述

1 修改全局数据的流程
---------------------------------------------------------------------------------------
  1 准备: Vuex 的环境配置完善
  
  2 需求: 准备修改 Vuex 中的, 外层数据, name 属性值
  
  3 操作: 
	1 在 Vuex 中的, mutations 模块中, 定义修改 name属性的方法: 
      mutations: {
    
    hh (state, data) {
    
     state.name = data}}
      
    2 在单文件组件中调用, 上面这个方法  //可以通过普通的方式, 或者辅助函数获取到
      this.hh("zhang")
---------------------------------------------------------------------------------------

2 请求数据的业务流程
---------------------------------------------------------------------------------------
  1 在 Vuex 中的, actions 中, 定义请求数据, 的回调函数
    actions: {
    
    
      hh(store, pd) {
    
      // 该方法内部, 用于定义数据请求
        api({
    
    cate: pd.cate}).then( res => {
    
      //
          // 调用 mutations 中的方法, 把获取到的数据, 赋值到 state 中
          store.commit('ap1s', {
    
    index: pd.index, list: res.list})
        })
      }
    } 

2 在单文件组件中调用, 上面这个方法, 且传递请求参数

3 在单文件组件中, 去使用 Vuex 的数据就 OK了  (请求到数据, 会赋值到 state上的)
---------------------------------------------------------------------------------------