包会！Vuex详解（State、Mutation、Action、Getter）

最新推荐文章于 2024-05-14 11:39:13 发布

世代农民

最新推荐文章于 2024-05-14 11:39:13 发布

阅读量772

点赞数 4

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_45056780/article/details/105389874

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
如果非要自己去理解就是将程序中的共享数据统一管理。
在我们的程序当中存在的共享数据，当我们更改共享数据发生错误时，我们很难去查找出是哪一个地方更改了数据。在此同时使用Vuex可使用调试工具（ devtools extension）检测到是哪一个组件修改了数据，形成快照！
我们知道Vue组件中的数据不是共享的，在一些共享数据我们使用信息传递比较麻烦，这是我们就可以放到vuex中进行管理，所有组件都可以使用！

1.Store

在我们使用Vuex之前我们需要先学会一个简单的store，每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，里面包含我们的大部分共享数据（state）。不理解不要紧，我们现在只需要知道如何使用即可。

1）搭建页面

在这里我搭建了一个很简单的应用，直接引入vue与vuex的js文件，如果使用的是脚手架搭建的模块化构建系统，按照Vue规定使用插件即可。

<!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>
    <div id="app">
        
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#app'
    })
</script>
</html>

2）创建store

<body>
    <div id="app">
        
    </div>
</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

来解释下上面的store中的state，state中存放的就是我们全局共享的数据。
我们将count这一全局变量交给Vuex管理，每一个实例只有一个store，既然交给他管理，我们怎样在组件中何时何地的取出使用？

1）方式一：$store.state.count

我们直接在页面中使用模板语法将其显示出来

<body>
    <div id="app">
        总数：{{$store.state.count}}
    </div>
</body>

运行结果：

如果我们在实例代码中使用需要加this–>this.$store.state.count

2)方式二：mapState辅助函数

在一种情形下，如果我们需要使用大量的共享数据，我们每一次使用都需要使用this.$store.state.xxx来获取数据，特别的冗余复杂，Vuex提供辅助函数我们可以将state中的共享数据映射到我们的computed函数中供我们直接使用。

<body>
    <div id="app">
        总数：{{count}}
        总数1：{{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>

运行结果：
在这里插入图片描述

从上代码中可以看出我们将state中的共享数据映射到该实例中的computed函数中，直接当作我们实例中的数据使用即可。
注：上面的三个点是对象展开运算符。可自行百度一下，这里来个小实例应该就明白了。

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){
            	//我们在总数后面加上一个字
                return state.count+'个'
            }
        }
    });

2）使用方法一：$store.getters.countNum

<body>
    <div id="app">
        总数：{{$store.getters.countNum}}
    </div>
</body>

3）使用方法二：mapGetters辅助函数

这里与上面的mapState辅助函数使用方法一样

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

直接使用即可：

<body>
    <div id="app">
        总数：{{countNum}}
    </div>
</body>

4.Mutation

来做个小实例，效果如图：
在这里插入图片描述
我们第一反应是这还不简单，直接@click = "$store.state.count++"不就可以了嘛，我们这样做是不对的，的确可以实现，但是来看官方文档：

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

官方文档已经说的很明白了，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。那么来使用一下：

1）首先在Vuex的store中加入事件类型mutations与更改数据的函数（注：我们在mutations中的函数只能同步！！不能写异步函数，如果需要写异步函数，需要使用Action）

const store = new Vuex.Store({
        state:{
            count:0
        },
        //更改state中的数据只能通过mutations！
        mutations:{
        	//加1函数
            add(state){
                state.count++
            },
            //减2函数
            reduce(state,step){
                state.count-=step
            }
        }
    });

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

2）调用mutations中的函数

无额外参数加1函数调用：$store.commit('add')
有额外参数减2函数调用：$store.commit('reduce',2)

<body>
    <div id="app">
        总数：{{count}}
        <button @click="$store.commit('add')">+1</button>
        <button @click="$store.commit('reduce',2)">-2</button>
    </div>
</body>

3）mapMutations辅助函数

看名字就知道我们也可以使用mapMutations将函数映射到实例的方法中。使用方法与上面的来个辅助函数差不多，不过我们需要放在实例的methods中：

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

在使用时直接调用即可：

<body>
    <div id="app">
        总数：{{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);
           } 
        }
    });

上面代码我们可以看出更改state中的数据还是通过mutation来进行更改。

2）调用action中的函数

无额外参数加1函数调用：$store.dispatch('add')
有额外参数减2函数调用：$store.dispatch('reduce',2)

<body>
    <div id="app">
        总数：{{count}}
        <button @click="$store.dispatch('add')">+1</button>
        <button @click="$store.dispatch('reduce',2)">-2</button>
    </div>
</body>

3）mapActions辅助函数

这个就不说了，与上面的mapMutations使用方法一样。

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

世代农民

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
包会！Vuex详解（State、Mutation、Action、Getter）

什么是Vuex？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。如果非要自己去理解就是将程序中的共享数据统一管理。在我们的程序当中存在的共享数据，当我们更改共享数据发生错误时，我们很难去查找出是哪一个地方更改了数据。在此同时使用Vuex可使用调试工具（ devtools extens...
复制链接

扫一扫