状态管理库之 Vuex

老项目还在用 vuex，来复习一波~

一、状态管理

• 应用程序需要处理各种各样的数据，这些数据需要保存在应用程序中的某一个位置，对于这些数据的管理称之为是状态管理
• vue 页面管理自己的状态
  • 在 Vue 开发中，使用组件化的开发方式
  • 而在组件中定义 data 或者在 setup 中返回使用的数据，这些数据称之为 state
  • 在模块 template 中可以使用这些数据，模块最终会被渲染成 DOM，称之为 View
  • 在模块中会产生一些行为事件，处理这些行为事件时，有可能会修改state，这些行为事件称之为actions

二、复杂的状态管理

• JavaScript 开发的应用程序，已经变得越来越复杂了
  • JavaScript 需要管理的状态越来越多，越来越复杂
  • 这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等
  • 也包括一些 UI 的状态，比如某些元素是否被选中，是否显示加载动效，当前分页
• 当应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏
  • 多个视图依赖于同一状态
  • 来自不同视图的行为需要变更同一状态
• 是否可以通过组件数据的传递
  • 对于一些简单的状态，确实可以通过 props 的传递或者 Provide 的方式来共享状态
  • 但是对于复杂的状态管理来说，显然单纯通过传递和共享的方式是不足以解决问题的，比如兄弟组件如何共享数据

三、Vuex 的状态管理

• 管理不断变化的state本身是非常困难的

  • 状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化
  • 当应用程序复杂时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪

• 将组件的内部状态抽离出来，以一个全局单例的方式来管理

  • 在这种模式下，组件树构成了一个巨大的“视图 View”
  • 不管在树的哪个位置，任何组件都能获取状态或者触发行为
  • 通过定义和隔离状态管理中的各个概念，并通过强制性的规则来维护视图和状态间的独立性，代码会变得更加结构化和易于维护、跟踪

• Vuex 背后的基本思想，它借鉴了 Flux、Redux、Elm（纯函数语言，redux有借鉴它的思想）

• 使用

  • 组件可以直接访问 State，但不能直接修改 State，
  • 必须通过 Dispatch 派发一个行为，拿到数据之后
  • 通过 commit Mutations 修改 State

四 、Vuex 的基本使用

vue2：

模板中使用：

1. 数据不长：{{ $store.state.counter }}
2. 数据很长，可使用 computed：

computed: {
storeCounter() {
return this.$store.state.counter;
},
}

使用： {{ storeCounter}}

vue3：

1. 修改 state： commit 提交：store.commit(“changeCounter”)
2. 获取数据：const { counter } = toRefs(store.state)

• 安装：npm i vuex
• 创建文件夹：store=> index.js

import { createStore } from "vuex";
// options:传入对象
const store = createStore({
    // 返回一个对象
  state: () => ({
    counter: 111110,
  }),
  mutations: {
    changeCounter(state) {
      state.counter++
    }
  }
});
export default store

• 使用

  • main.js 中使用：createApp(App).use(store).mount("#app")，通过插件安装
  • template中访问 counter：

    app:{{ $store.state.counter }}

  • 在option API中的computed中使用

  export default {
    computed: {
      storeCounter() {
        return this.$store.state.counter;
      },
    },
  };
  

  • 在setup中使用

    • 解构之后不是响应式
    • 直接赋值给另外一个变量也不是响应式
    • 需要使用 toRefs()

  • 修改 state

    • 组件中 commit 提交：store.commit(“changeCounter”)
    • store 中定义属性 mutation：

      mutations: {
          // 默认传入 state
        changeCounter(state) {
          state.counter++
        }
      }
    

  <script setup>
  import { toRefs } from "vue";
  import { useStore } from "vuex";
  const store = useStore();
  // setup直接赋值
  const setupCounter=store.state.counter
  console.log(store.state.counter);
  // 直接解构
  // const { counter } = store.state
  // toRefs
  const { counter } = toRefs(store.state)
  
  const changeCounter = () => {
    // 提交事件：store 中 mutation 中对应的名称
    store.commit("changeCounter");
    // store.state.counter++
  };
  </script>
  

五、创建 store

• 每一个 Vuex 应用的核心就是 store（仓库）
  • store本质上是一个容器，它包含着应用中大部分的状态（state）
• Vuex 和单纯的全局对象区别
  • 第一：Vuex的状态存储是响应式的
    • 当 Vue 组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会被更新
  • 第二：不能直接改变store中的状态
    • 改变 store 中的状态的唯一途径就显示提交 (commit) mutation
    • 这样使得方便的跟踪每一个状态的变化，从而能够通过一些工具帮助更好的管理应用的状态
• 使用步骤
  • 创建 Store 对象
  • 在 app 中通过插件安装

<template>
  <div class="home">
    <h2>home:{{ $store.state.counter }}</h2>
    <button @click="changeCounter"> +1</button>
  </div>
</template>

<script setup>
    // 通过 hook 的方式拿到我们的 store
import { useStore } from 'vuex'
const store = useStore()
const changeCounter = () => {
  // 提交事件
  store.commit("changeCounter")
  // store.state.counter++
}
</script>
<style lang="less" scoped>

</style>

六、单一状态树

• Vuex 使用单一状态树
  • 用一个对象就包含了全部的应用层级的状态
  • 采用的是 SSOT，Single Source of Truth，也可以翻译成单一数据源
• 这也意味着，每个应用将仅仅包含一个 store 实例
  • 单状态树和模块化并不冲突，因为还有 module ，进行了分模块
• 单一状态树的优势
  • 如果状态信息是保存到多个 Store 对象中的，那么之后的管理和维护等等都会变得特别困难
  • 所以 Vuex 也使用了单一状态树来管理应用层级的全部状态
  • 单一状态树能够以最直接的方式找到某个状态的片段
  • 而且在之后的维护和调试过程中，比较直观，也可以非常方便的管理和维护，但不够灵活

七、状态映射

vue2:

computed: {
// 数组
...mapState(['name','level','avatarURL']), // 返回函数
// 可以改名称
...mapState({
sName:state=>state.name,
sLevel:state=>state.level,
sAvatarURL:state=>state.avatarURL
})
}

vue3:

const store = useStore()
const {name:sname,level:slevel} = toRefs(store.state)

• state 很多，一般都是直接映射到computed中

import { createStore } from "vuex";
const store = createStore({
  state: () => ({
    counter: 111110,
    name: "lisa",
    level: 99,
    avatarURL: "hhhh",
  }),
  mutations: {
    changeCounter(state) {
      state.counter++;
    },
  },
});
export default store;

• 使用：import { mapState } from 'vuex'

• 映射方式

  • 通过数组形式映射需要确保名字和 data 中不一致
  • 通过传入对象可以自己自定义名字

• 适用于 vue2

<template>
  <div class="app">
    <!-- 1. 在模板中直接使用多个状态 -->
    <h2>name：{{ $store.state.name }}</h2>
    <h2>name：{{ $store.state.level }}</h2>
    <h2>name：{{ $store.state.avatarURL }}</h2>
    <!-- 2. 计算属性 （映射状态）-->
    <h1>name:{{ name }}</h1>
    <h1>name:{{ level }}</h1>
    <h1>name:{{ avatarURL }}</h1>
    <!-- 3. 计算属性:对象语法 -->
    <h3>name:{{ sName }}</h3>
    <h3>name:{{ sLevel }}</h3>
    <h3>name:{{ sAvatarURL }}</h3>
  </div>
</template>
<script >
import { computed } from 'vue';
import { mapState } from 'vuex'
export default{
  computed: {
    fullname() {
      return "xxx"
    },
    // 数组
    ...mapState(['name','level','avatarURL']), // 返回函数
      // 可以改名称
    ...mapState({
      sName:state=>state.name,
      sLevel:state=>state.level,
      sAvatarURL:state=>state.avatarURL
    })
  }
}
</script>
    

• 适用于 vue3：

  • 在 setup 语法中返回的是函数，可以computed一起使用需要结合bind使用

  • 拿到函数

  • 绑定 this

<script setup>
import { computed} from 'vue'
import { useStore, mapState } from 'vuex'

const { name, level, avatarURL } = mapState(['name', 'level', 'avatarURL'])
const store = useStore()
const cName = computed(name.bind({$store:store}))
const clevel = computed(level.bind({$store:store}))
const cavatarURL = computed(avatarURL.bind({$store:store}))
</script>

• 封装 hooks 函数

import { computed } from 'vue'
import { useStore ,mapState} from 'vuex'
export default function useState(mapper) {
  const store = useStore()
  const stateFnsObj = mapState(mapper)
  const newStates = {}
  Object.keys(stateFnsObj).forEach(key=>{
    newStates[key] = computed(stateFnsObj[key].bind({$store:store}))
  })
  return newStates
}

import useState from "../hooks/useState";
const {name,level} = useState(["name", "level", "avatarURL"]);

• vue3 推荐方案：直接对store.state 进行解构，结合 toRefs 变成响应式

const store = useStore()
const {name:sname,level:slevel} = toRefs(store.state)

八、getters

• 相当于组件的computed

import { createStore } from "vuex";
const store = createStore({
  state: () => ({
    counter: 111110,
    users: [
      { id: "111", name: "lisa", age: 33 },
      { id: "131", name: "shawll", age: 33 },
      { id: "141", name: "hsih", age: 43 },
      { id: "151", name: "fef", age: 53 },
      { id: "161", name: "ffb", age: 53 },
    ],
  }),
  mutations: {
    changeCounter(state) {
      state.counter++;
    },
  },
  getters: {
      // 1. 基本使用
    doubleCounter(state) {
      return state.counter * 2;
    },
    totalAge(state) {
      return state.users.reduce((preValue, item) => {
        return item.age + preValue;
      }, 0);
    },
      // 2. 在 getter 属性中使用另外一个getter
    message(state, getters) {
      // getter中使用其他的getters
      return `name为${state.name} totalAge为${getters.totalAge}`;
    },
      // 3. getters 可以返回一个函数，调用这个函数可以传入参数
    getUserById(state) {
     
      return function (id) {
        const friend = state.users.find(item => item.id == id)
        return friend
      }
    }
  },
});
export default store;

• 使用

  • 在template中使用

  <template>
    <div>
      <h1>{{$store.getters.doubleCounter}}</h1>
      <h1>totalAge：{{ $store.getters.totalAge }}</h1>
      <h1>message：{{ $store.getters.message }}</h1>
  // 返回一个函数：调用这个函数
      <h1>user：{{ $store.getters.getUserById(111) }}</h1>
    </div>
  </template>
  

八、mapGetters

• vue2

<script>
import { mapGetters, useStore } from "vuex";
export default {
  computed: {
    ...mapGetters(["doubleCounter", "totalAge", "message"]),
    ...mapGetters(["getUserById"]),
  },
};
</script>

• vue3

<script setup>
import { computed, toRefs } from "vue";
import { mapGetters } from "vuex";
import { useStore } from "vuex";
const store = useStore();
// 1. 使用 mapGetters
const { message: messageFn } = mapGetters(["message"]);
// const message = computed(messageFn.bind({ $store: store }))
// 2. 直接解构，并且包裹成ref
// const { message } = toRefs(store.getters);
// 3. 针对某一个getters属性使用computed
const message = computed(() => store.getters.message);
</script>

九、Mutation

• 类似于 methods
• 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

<template>
  <div class="home">
    <h2>name:{{ $store.state.name }}</h2>
    <button @click="changeName('小明')">changeName</button>
  </div>
</template>
<script>
// export default {
//   methods: {
//     changeName() {
//       this.$store.commit("changeName");
//     },
//   },
// };
</script>
<script setup>
import { useStore } from "vuex";
const store = useStore();
const changeName = (name) => {
    // 第二个参数可以是对象{{name:"yyyy",count:33}}
  store.commit("changeName",name);
};
</script>
<style lang="less" scoped></style>

  mutations: {
    changeCounter(state) {
      state.counter++;
    },
    changeName(state,payload) {
      state.name = payload
    }
  },

• 常量
  • 单独一个文件定义mutation类型：mutation_types.js:export const CHANGE_INFO = "changeInfo"
  • 导入：import { CHANGE_INFO } from "./mutation_types";
  • 使用
    • store中：[CHANGE_INFO]

十、mapMutations

• 组件中不需要 commit 直接修改
• vue2

<template>
	<div>
        <button @click = "changeName('jujuih')">
    		修改名字        
        </button>
    </div>
</template>
<script>
import { mapMutations } from "vuex";
import { CHANGE_INFO } from "@/store/mutation_types";
export default {
  computed: {},
  methods: {
    btnClick() {
      console.log("btnClick");
    },
    // 直接映射过去了，不需要commit
    ...mapMutations(["changeName", "incrementLevel", CHANGE_INFO]),
  },
};
</script>

• vue3

<script setup>
// 返回了一个个函数
const mutations = mapMutations(["changeName", CHANGE_INFO]);
const newMutations = {};
Object.keys(mutations).forEach((key) => {
  newMutations[key] = mutations[key].bind({ $store: store });
});
const { changeName, changeInfo } = newMutations;
</script>

• 重要原则：执行的函数必须是同步函数
  • 这是因为 devtool 工具会记录 mutation 的日记
  • 每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照
  • 但是在 mutation 中执行异步操作，就无法追踪到数据的变化

十二、actions

• 目的就是为了完成异步操作

• 所有的修改都必须提交 mutation，包括 actions

• Action类似于mutation，不同在于

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

• 有一个非常重要的参数 context

  • context 是一个和 store 实例均有相同方法和属性的 context 对象
  • 可以从其中获取到commit方法来提交一个mutation，或者通过 context.state 和 context.getters 来获取 state 和getters

<template>
  <div class="home">
    <h2>home:{{ $store.state.counter }}</h2>
    <button @click="actionBtnClick">发起action</button>
  </div>
</template>
<script>
export default {
  methods: {
    actionBtnClick() {
      this.$store.dispatch("incrementAction");
    },
  },
};
</script>
<script setup>
import { useStore } from "vuex";
const store = useStore();
store.dispatch("incrementAction");
</script>
<style lang="less" scoped></style>

  actions: {
    incrementAction(context,payload) {
      console.log(context.commit);//用于提交mutation
      console.log(context.getters);//getters
      console.log(context.state);//state
      context.commit("increment",payload)
    }
  }
  mutations: {
    increment(state) {
      state.counter++;
    }
  },

十三、mapActions

• 适合vue2

<template>
  <div class="home">
    <h2>home:{{ $store.state.counter }}</h2>
    <button @click="incrementAction">发起action</button>
  </div>
</template>
<script>
 import { mapActions } from "vuex";
 export default {
   methods: {
//     // incrementAction() {
//     //   this.$store.dispatch("incrementAction");
//     // },
     ...mapActions(["incrementAction"]),
   },
 };
</script>
<script setup>
import { useStore, mapActions } from "vuex";
const store = useStore();
const { incrementAction } = mapActions(["incrementAction"]);
// store.dispatch("incrementAction");
</script>

• Action 通常是异步的，可以通过让action返回Promise，在 Promise 的 then 中来处理完成后的操作

十四、actions 中异步操作

• 数据管理方式一

  • 将从服务器拿到的数据，在对应的页面组件进行管理

• 数据管理方式二

  • 一个页面中的组件数据，抽取到 Vuex 中管理
  • 在 actions 中发送网络请求
  • async 异步函数：返回的一定是 promise

   async fetchHomeMulticatedAction(context) {
        // 1. 返回promise，给promise设置then
        // fetch("jjjj").then((res) => {
        //   res.json().then((data) => {
        //     console.log(data);
        //   });
        // });
        // 2. promise 的链式调用
        // fetch("jjjj")
        //   .then((res) => {
        //     return res.json();
        //   })
        //   .then((data) => {
        //     console.log(data);
        //   });
  
        // 3. await/async
        const res = await fetch("http://");
        const data = await res.json()
        console.log(data);
        // 修改state的数据
        context.commit("changeBanner",data.data.banner.list)
      },
  

  <script setup>
  import { useStore } from "vuex";
  
  // 告诉 vuex 发送网络请求
  const store = useStore();
  store.dispatch("fetchHomeMulticatedAction");
  </script>
  

十五、modules

• 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store 对象就有可能变得相当臃肿

• 为了解决以上问题，Vuex 可以将 store 分割成模块（module）

• 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

• 创建模块 modules/home.js ,在模板中使用需要加上模块名字

• 模块内的 getter 里面的函数默认会合并到总的 store 里面

• store中创建 modules ==》counter.js

const counter = {
  state: () => ({
    count:99
  }),
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  getters: {
    doubleCount(state, getters, rootState) {
      return state.count + rootState.counter
    }
  },
  actions: {
    incrementCountAction(context) {
      context.commit("increment")
    }
  }
}

• 总的index.js

  modules: {
    home: homeModule,
    counter:counterModule
  }

• 使用

<template>
  <div class="home">
    <h2>home</h2>
    <!-- 使用state时，是需要state.moduleName.xxx -->
    <h2>counter模块的counter：{{ $store.state.counter.count }}</h2>
    <!-- 使用getters时，是直接getters.xxx -->
    <h2>counter模块的doubleCounter：{{ $store.getters.doubleCount }}</h2>
    <button @click="incrementCountAction">counter模块+1</button>
  </div>
</template>

<script setup>
import { useStore } from "vuex";

// 派发事件时候，也是不需要跟模块的
// 提交mutation时，也是不需要跟模块的，直接提交即可
const store = useStore();
function incrementCountAction() {
  store.dispatch("incrementCountAction");
}
</script>
<style lang="less" scoped></style>

十六、Module 的命名空间

• 模块内部的 action 和 mutation 仍然是注册在全局的命名空间中的
  • 这样使得多个模块能够对同一个 action 或 mutation 作出响应
  • Getter 同样也默认注册在全局命名空间
• 希望模块具有更高的封装度和复用性，可以添加 namespaced: true 的方式使其成为带命名空间的模块
  • 当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
  • 使用
    • 模板中使用：{{$store.getters["counter/doubleCount"]}}
    • 派发事件:store.dispatch("counter/incrementAciton")