vue3中vuex教程

Posted 2022-12-10 嘴巴嘟嘟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3中vuex教程相关的知识，希望对你有一定的参考价值。

什么是状态管理

在开发中，我们会的应用程序需要处理各种各样的数据，这些
数据需要保存在我们应用程序中的某一个位置，对于这些数据
的管理我们就称之为是状态管理。

在Vue开发中，我们使用组件化的开发方式；
而在组件中我们定义data或者在setup中返回使用的数据，
这些数据我们称之为state；
在模块template中我们可以使用这些数据，模块最终会被渲染成DOM，我们称之为View；
在模块中我们会产生一些行为事件，处理这些行为事件时，
有可能会修改state，这些行为事件我们称之为actions；

复杂的状态管理

当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态；
来自不同视图的行为需要变更同一状态；

Vuex的状态管理

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

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

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

Vuex的状态管理

npm install vuex@next

创建Store

store本质上是一个容器，它包含着你的应用中大部分的状态（state）；每一个Vuex应用的核心就是store（仓库）

注意
Vuex和单纯的全局对象有什么区别呢？

第一：Vuex的状态存储是响应式的，当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会被更新；
第二：你不能直接改变store中的状态，改变store中的状态的唯一途径就显示提交 (commit) mutation；

组件中使用store

在模板中使用；
在options api中使用，比如computed；
在setup中使用；

案列
src下面创建store文件夹，里面创建index.js

import 
    createStore
 from 'vuex'


const store = createStore(
    state() 
        return 
            counter: 0,
            name: "张三",
            age: 23,
            sex: "男"
        
    ,
    mutations: 
        increment(state) 
            state.counter++
        ,
        decrement(state) 
            state.counter--
        
    
)

export default store

在组件中使用

<template>
  <div>
     $store.state.counter 
    <button @click="add">+1</button>
    <button @click="decren">-1</button>
    <hr />
    <p> name </p>
    <p> age </p>
    <p> sex </p>
  </div>
</template>

<script>
import  useStore, mapState  from "vuex";
import  computed  from "vue";
export default 
  setup() 
    const store = useStore();
    const add = () => 
      store.commit("increment");
    ;
    const decren = () => 
      store.commit("decrement");
    ;
   
    return  add, decren ;
  ,
;
</script>

<style>
#app 
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

</style>

单一状态树

Vuex 使用单一状态树：

用一个对象就包含了全部的应用层级的状态；
采用的是SSOT，Single Source of Truth，也可以翻译成单一数据源；

单一状态树的优势：

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

组件获取状态

我们可以使用计算属性或者使用mapState的辅助函数：

在setup中使用mapState

在setup中如果我们单个获取装是非常简单的：
通过useStore拿到store后去获取某个状态即可；
默认情况下，Vuex并没有提供非常方便的使用mapState的方式，这里我们进行了一个函数的封装：

import 
    computed
 from 'vue'
import 
    useStore,
    mapState
 from 'vuex'

export default function useState(mapper) 
    const store = useStore()
    const stateFns = mapState(mapper)
    const state = 
    Object.keys(stateFns).forEach(key => 
        state[key] = computed(stateFns[key].bind(
            $store: store
        ))
    )
    return state

组件中使用

const state = useState(
      name: (state) => state.name,
    );
    return

getters的基本使用

某些属性我们可能需要经过变化后来使用，这个时候可以使用getters：

   getters: 
        totalPrice(state) 
            let totalPrice = 0;
            for (const book of state.books) 
                totalPrice = +book.count * book.price
            
            return totalPrice;
        
    ,

getters可以接收第二个参数：

getters: 
        totalPrice(state, getters) 
            let totalPrice = 0;
            for (const book of state.books) 
                totalPrice = +book.count * book.price
            
            return totalPrice + '---'+getters.myName;
        ,
        myName(state) 
            return state.name
        
    ,

mapGetters的辅助函数

在setup中使用
单独定义一个js文件

export function useGetters(mapper) 
    const store = useStore()
    const stateFns = mapGetters(mapper)
    const state = 
    Object.keys(stateFns).forEach(key => 
        state[key] = computed(stateFns[key].bind(
            $store: store
        ))
    )
    return state

组件中引用

setup() 
    const stateFns = useGetters(["totalPrice"]);
    return  ...stateFns ;
  ,

Mutation基本使用

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation：

 mutations: 
        increment(state) 
            state.counter++
        ,
        decrement(state) 
            state.counter--
        ,
        incrementN(state, payload) 
            state.counter += payload.n

const incre = () => 
      store.commit("incrementN",  n: 100, name: 20 );
    ;

Mutation常量类型

要引入js文件

在组件中使用首先引入js文件

store.commit(
        type: ADD_NUMBER,
        count: 1200,
      );

mapMutations辅助函数

我们也可以借助于辅助函数，帮助我们快速映射到对应的方法中：

mutation重要原则

actions的基本使用

Action类似于mutation，不同在于：

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

actions: 
        // 放函数
        incrementAction(context) 
            context.commit('increment')

这里有一个非常重要的参数context：

context是一个和store实例均有相同方法和属性的context对象；
所以我们可以从其中获取到commit方法来提交一个mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters；
但是为什么它不是store对象呢？这个等到我们讲Modules时再具体来说；

actions的分发操作

分发使用的是 store 上的dispatch函数；

setup() 
    const store = useStore();
    const increment = () => 
      setTimeout(() => 
        store.dispatch("incrementAction");
      , 2000);
    ;
    return  increment ;
  ,

 decrementAuction(context,payload)
      context.commit('incrementN',n:payload.num)

actions的辅助函数

action也有对应的辅助函数：

actions的异步操作

我们可以通过让action返回Promise，在Promise的then中来处理完成后的操作；

module的基本使用

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

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

module的局部状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象：

getters: 
      doubleHomeCounter(state, getters, rootState, rootGetters) 
        return state.homeCounter * 2
      ,
      otherGetter(state) 
        return 100
      
    ,
    mutations: 
      increment(state) 
        state.homeCounter++
      
    ,

actions: 
      incrementAction(commit, dispatch, state, rootState, getters, rootGetters) 
        commit("increment")
        commit("increment", null, root: true)
 
      ,
      doubleHomeCounter2(commit)
          commit("increment")