【Vue】八、Vuex状态管理

最新推荐文章于 2024-06-15 14:41:39 发布

北城小林

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量441

点赞数

分类专栏： 09_前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43333483/article/details/128441304

版权

09_前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

后端程序员的vue学习之路

一、什么是Vuex？
二、5个核心选项
三、 vuex测试示例

一、什么是Vuex？

官方文档：https://vuex.vuejs.org/zh/index.html
官方描述：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化；

可以理解为Vuex是用来管理组件之间通信和共享数据的一个插件,
相当于一个存放全局变量的缓存区，可以像使用cookie一样去使用，
在多个组件之间共享数据，切换路由时，不影响vuex里的数据的，除非在组件里面对vuex进行了操作；

我们知道组件之间是独立的，组件之间想要实现通信和共享数据，vue中提供了一种props选项，但该选项仅限于父组件和子组件之间的通信，如果兄弟组件之间想要实现通信就无法实现，当开发大中型项目时，项目中将会有一大堆组件之间需要通信和共享数据，同时每个组件都有自己一大堆的逻辑代码，如果要实现通信和传递数据，代码逻辑比较繁杂，不易维护，所以Vuex就是把组件之间共享的数据给提取出来，在一定的规则下管理这些数据，这就是Vuex的基本逻辑；

二、5个核心选项

1、state：

用来存放组件之间共享的数据，它与组件的data选项类似，只不过data选项是用来存放组件的私有数据；

2、getters：

用于对state数据进行筛选、过滤，getters下的函数接收state作为第一个参数，state里面是原始数据，通过getters的筛选过滤后再存放到$store.getters对象中；

3、mutation（变异）：

在Vuex store中，实际改变状态(state)的唯一方式是通过提交(commit)一个mutation（变异），mutations下的函数接收一个state作为第一个参数，接收一个payload（载荷）作为第二个参数，payload（载荷）是用来记录开发者使用该函数的一些信息，另外mutations方法必须是同步方法；
更改state数据并显示在组件中，有几个步骤：

1、在mutations选项里，注册函数里面装逻辑代码；
2、在组件里提交this.$store.commit(‘change’, payload)，提交的函数名要与mutations里面的函数名一一对应；
3、触发函数，state就会相应更改；
4、在组件的计算属性里 this.$store.state获取你想要得到的数据；

4、actions：

Action 类似于 mutation，不同在于：

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

actions和mutations的区别

（1）Actions 提交的是 mutations，而不是直接变更状态，也就是说，actions会通过mutations，让mutations帮他提交数据的变更；
（2）Action 可以包含任意异步操作，ajax、setTimeout、setInterval都可以；
mutations要求是同步函数，actions可以处理异步操作；
actions和mutations的区别
（1）Actions 提交的是 mutations，而不是直接变更状态，也就是说，actions会通过mutations，让mutations帮他提交数据的变更；
（2）Action 可以包含任意异步操作，ajax、setTimeout、setInterval都可以；
context dispatch是什么？
context：context是与store实例具有相同方法和属性的对象，可以通过context.state和context.getters来获取state和getters；
dispatch：意为‘派发、派遣’，触发事件时，dispatch会通知actions，参数跟commit也是一样；

action的大体流程：

1.在actions选项里添加函数（异步）并提交到对应的函数（在mutation选项里）中 context.commit(‘changeAsync’,value)；
2.　在组件里： changeNumAnsyc:function(){this.$store.dispatch(‘add’, 5);} 将dispatch“指向”actions选项里的函数
3.在mutations选项里，要有对应的函数 changeAsync:function(state,a){console.log(state.num +=a);}

5、Module

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

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

三、 vuex测试示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex"></script>
    <title>vuex测试示例</title>
</head>

<body>
    <div id="app">
        
        <!-- 自定义组件 -->
        <power></power>

    </div>
</body>

<script>
    Vue.use(Vuex);//在创建Vue实例之前
    var myStore = new Vuex.Store({
        state: {
            //存放组件之间要共享的数据
            name: "powernode",
            age: 11,
            num: 1
        },
        //变异
        mutations: {
            //显式的更改state里的数据
            change: function (state, a) {
                state.num += a
            },
            changeAsync: function (state, a) {
                state.num += a;
            }
        },
        getters: {
            //获取state的数据
            getAge: function (state) {
                return state.age * 2;
            }
        },
        actions: { //更改state里的数据
            //设置延时
            add: function (context, value) {
                setTimeout(function () {
                    //提交事件
                    context.commit('changeAsync', value);
                }, 1000)
            }
        }
    });

    Vue.component('power', {
        template: `
                <div>
                    <p @click='changeNum'>姓名：{{name}} 年龄：{{age}} 次数：{{num}}</p>
                    <button @click='changeNumAnsyc'>改变</button>
                </div>`,
        computed: {
            name: function () {
                return myStore.state.name
            },
            age: function () {
                return myStore.getters.getAge
            },
            num: function () {
                return myStore.state.num
            }
        },
        methods: {
            changeNum: function () {
                //在组件里提交
               myStore.commit('change', 10)
            },
            changeNumAnsyc: function(){
                myStore.dispatch('add', 5);
            }
        }
    })
    new Vue({
        el: "#app",
        store: myStore,
    })
</script>

</html>