包会!Vuex详解(State、Mutation、Action、Getter)

【自取】最近整理的,有需要可以领取学习:

什么是Vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
如果非要自己去理解,那就是对程序中共享数据的统一管理。[en]If you have to understand it yourself, it is the unified management of the shared data in the program.
我们的程序中有共享数据,当我们在更改共享数据时出错时,很难找出数据被更改在哪里。同时,使用Vuex,您可以使用调试工具(DevTools扩展)来检测哪个组件修改了数据以形成快照![en]There is shared data in our program, and when we make an error when we change the shared data, it is difficult to find out where the data has been changed. At the same time, using Vuex, you can use the debugging tool (devtools extension) to detect which component has modified the data to form a snapshot!
我们知道,Vue组件中的数据是不共享的,在一些共享数据中我们使用信息传递比较麻烦,这就是我们可以放入Vuex进行管理,所有的组件都可以使用![en]We know that the data in Vue components is not shared, in some shared data we use information transmission is more troublesome, this is we can put into the vuex for management, all components can be used!

目录

*
1.Store
2.State
3.Getter
4.Mutation
5.Action

1.Store

在我们使用Vuex之前,我们需要了解一个简单的商店。每一个Vuex应用的核心都是商店。“存储”基本上是一个容器,其中包含我们的大部分共享数据(状态)。如果我们不理解并不重要,我们现在只需要知道如何使用它。[en]Before we use Vuex, we need to learn a simple store. * the core of every Vuex application is store * . “store” is basically a container that contains most of our shared data (state). It doesn’t matter if we don’t understand, we just need to know how to use it now.

1)搭建页面

在这里我构建一个非常简单的应用程序,直接介绍vue和vuex的js文件,如果你使用的是脚手架构建的模块化构建系统,你可以使用符合Vue规则的插件。[en]Here I build a very simple application, directly introduce the js file of vue and vuex, if you are using a modular construction system built by scaffolding, you can use plug-ins in accordance with Vue regulations.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./vue.js"></script>
<script src="./vuex.js"></script>
<body>

</body>
<script>
    const vm = new Vue({
        el:'#app'
    })
</script>
</html>

2)创建store

<body>

</body>
<script>

    // 注:如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)
    // 例:
    // import Vuex from 'vuex'
    // Vue.use(Vuex)

    //创建store,参数为一个对象
    const store = new Vuex.Store({
        state:{
            //将count交给vuex管理
            count:0
        }
    });

    const vm = new Vue({
        el:'#app',
        //将store挂载到此实例中
        store
    })
</script>

2.State

为了解释存储在状态中的内容,上面存储的状态是我们的全局共享数据。[en]To explain that what is stored in the state,state in the store above is our globally shared data.
我们将全局变量count赋给Vuex管理,并且每个实例只有一个存储。既然我们把它交给他来管理,我们怎么才能把它拿出来,在组件中随时随地使用呢?[en]We give the global variable count to Vuex management, and each instance has only one store. Since we give it to him to manage, how can we take it out and use it in the component when and where?

1)方式一:$store.state.count

我们使用模板语法将其直接显示在页面上。[en]We use template syntax to display it directly on the page.

<body>
    <div id="app">
        &#x603B;&#x6570;&#xFF1A;{{$store.state.count}}
    </div>
</body>

运行结果:[en]Running result:

包会!Vuex详解(State、Mutation、Action、Getter)
如果我们在示例代码中使用它,我们需要添加这个->This.$Store.state.count[en]If we use it in the example code, we need to add this- > * this.$store.state.count*

2)方式二:mapState辅助函数

在一种情况下,如果我们需要使用大量的共享数据,我们需要在每次使用时使用这个.$Store.state.xxx来获取数据。特别是冗余性和复杂性,Vuex提供了辅助功能。我们可以将状态中的共享数据映射到我们的计算函数,以供直接使用。[en]In one case, if we need to use a large amount of shared data, we need to use this.$store.state.xxx to obtain data every time we use it. Especially redundant and complex, Vuex provides auxiliary functions. We can * map the shared data in state to our computed function * for our direct use.

<body>
    <div id="app">
        &#x603B;&#x6570;&#xFF1A;{{count}}
        &#x603B;&#x6570;1&#xFF1A;{{count1}}
    </div>
</body>
<script>

    // 注:如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)
    // 例:
    // import Vuex from 'vuex'
    // Vue.use(Vuex)

    //创建store
    const store = new Vuex.Store({
        state:{
            count:0,
            count1:1
        }
    });

    const vm = new Vue({
        el:'#app',
        store,
        computed:{
            //使用模块搭建项目可使用import按需引入,直接使用mapState即可
            ...Vuex.mapState(['count','count1'])
        }
    })
</script>

运行结果:[en]Running result:

包会!Vuex详解(State、Mutation、Action、Getter)

我们可以从上面的代码中看到,我们将状态中的共享数据映射到该实例中的计算函数,该函数可以直接用作我们实例中的数据。[en]We can see from the above code that we map the shared data in state to the computed function in this instance, which can be used directly as the data in our instance.
注:上面的三个点是对象展开运算符。可自行百度一下,这里来个小实例应该就明白了。

let { x, y, …z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }

3.Getter

getters相当于我们实例中的computed计算属性。这一句话我们应该就明白的差不多了。使用方法与state没有太大差距。

1)在store中加入getters类型与函数

const store = new Vuex.Store({
        state:{
            count:0
        },
        getters:{
            countNum(state){
                //&#x6211;&#x4EEC;&#x5728;&#x603B;&#x6570;&#x540E;&#x9762;&#x52A0;&#x4E0A;&#x4E00;&#x4E2A;&#x5B57;
                return state.count+'&#x4E2A;'
            }
        }
    });

2)使用方法一:$store.getters.countNum

<body>
    <div id="app">
        &#x603B;&#x6570;&#xFF1A;{{$store.getters.countNum}}
    </div>
</body>

3)使用方法二:mapGetters辅助函数

下面是使用上面的mapState助手函数的相同方法[en]Here is the same way to use the mapState helper function above

const vm = new Vue({
        el:'#app',
        store,
        computed:{
            ...Vuex.mapGetters(['countNum'])
        }
    })

您可以直接使用它:[en]You can use it directly:

<body>
    <div id="app">
        &#x603B;&#x6570;&#xFF1A;{{countNum}}
    </div>
</body>

4.Mutation

我们举一个小例子,效果如图所示:[en]Let’s make a small example, the effect is as shown in the figure:

包会!Vuex详解(State、Mutation、Action、Getter)
我们第一反应是这还不简单,直接@click = “$store.state.count++”不就可以了嘛,我们这样做是不对的,的确可以实现,但是来看官方文档:

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

官方文件明确表示,改变Vuex门店状态的唯一方法是提交突变。因此,让我们使用它:[en]The official documentation has made it clear that the only way to change the status in the store of Vuex is to submit the mutation. So let’s use it:

1)首先在Vuex的store中加入事件类型mutations与更改数据的函数( &#x6CE8;&#xFF1A;&#x6211;&#x4EEC;&#x5728;mutations&#x4E2D;&#x7684;&#x51FD;&#x6570;&#x53EA;&#x80FD;&#x540C;&#x6B65;&#xFF01;&#xFF01;&#x4E0D;&#x80FD;&#x5199;&#x5F02;&#x6B65;&#x51FD;&#x6570;&#xFF0C;&#x5982;&#x679C;&#x9700;&#x8981;&#x5199;&#x5F02;&#x6B65;&#x51FD;&#x6570;&#xFF0C;&#x9700;&#x8981;&#x4F7F;&#x7528;Action

const store = new Vuex.Store({
        state:{
            count:0
        },
        //&#x66F4;&#x6539;state&#x4E2D;&#x7684;&#x6570;&#x636E;&#x53EA;&#x80FD;&#x901A;&#x8FC7;mutations&#xFF01;
        mutations:{
            //&#x52A0;1&#x51FD;&#x6570;
            add(state){
                state.count++
            },
            //&#x51CF;2&#x51FD;&#x6570;
            reduce(state,step){
                state.count-=step
            }
        }
    });

需要注意的是:上面函数中的第一个参数为state对象,固定,第二个参数为我们的额外参数

2)调用mutations中的函数

  1. 无额外参数加1函数调用: $store.commit('add')
  2. 有额外参数减2函数调用: $store.commit('reduce',2)
<body>
    <div id="app">
        &#x603B;&#x6570;&#xFF1A;{{count}}
        <button @click="$store.commit('add')">+1</button>
        <button @click="$store.commit('reduce',2)">-2</button>
    </div>
</body>

3)mapMutations辅助函数

通过查看名称,我们还可以使用mapMutations将函数映射到实例的方法。该方法类似于上面的helper函数,但我们需要将其放入实例的方法中:[en]By looking at the name, we can also use mapMutations to map the function to the method of the instance. The method is similar to the helper function above, but we need to put it in the methods of the instance:

const vm = new Vue({
        el:'#app',
        store,
        computed:{
            ...Vuex.mapState(['count'])&#xFF0C;
            ...Vuex.mapGetter(['countNum'])
        },
        methods:{
            ...Vuex.mapMutations(['add','reduce'])
        }
    })

使用时可直接调用:[en]You can call it directly when you use it:

<body>
    <div id="app">
        &#x603B;&#x6570;&#xFF1A;{{count}}
        <button @click="add">+1</button>
        <button @click="reduce(2)">-2</button>
    </div>
</body>

5.Action

Action 类似于 Mutation,不同在于:

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

1)加入事件类型action与函数

const store = new Vuex.Store({
        state:{
            count:0
        },
        mutations:{
            add(state){
                state.count++
            },
            reduce(state,step){
                state.count-=step
            }
        },
        actions:{
           add(context){
               context.commit('add');
           },
           reduce(context,dept){
               context.commit('reduce',2);
           }
        }
    });

在上面的代码中,我们可以看到更改状态中的数据或通过突变来更改它。[en]In the above code, we can see that * change the data in state or change it through mutation. *

2)调用action中的函数

  1. 无额外参数加1函数调用: $store.dispatch('add')
  2. 有额外参数减2函数调用: $store.dispatch('reduce',2)
<body>
    <div id="app">
        &#x603B;&#x6570;&#xFF1A;{{count}}
        <button @click="$store.dispatch('add')">+1</button>
        <button @click="$store.dispatch('reduce',2)">-2</button>
    </div>
</body>

3)mapActions辅助函数

我们不讨论这一点,就像上面使用mapMutations的方式一样。[en]Let’s not talk about this, the same way mapMutations is used above.

Vuex还有许多其他使用的小技巧,大家可以进入官网查看学习一下。祝大家天天开心!

Original: https://blog.csdn.net/weixin_45056780/article/details/105389874
Author: 世代农民
Title: 包会!Vuex详解(State、Mutation、Action、Getter)

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/6111/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

发表回复

登录后才能评论
免费咨询
免费咨询
扫码关注
扫码关注
联系站长

站长Johngo!

大数据和算法重度研究者!

持续产出大数据、算法、LeetCode干货,以及业界好资源!

2022012703491714

微信来撩,免费咨询:xiaozhu_tec

分享本页
返回顶部