vue--vuex详解

最新推荐文章于 2023-11-30 15:07:55 发布

程序员的生活1

最新推荐文章于 2023-11-30 15:07:55 发布

阅读量361

点赞数

分类专栏： web前端 html+css 文章标签： vue 前端框架

本文链接：https://blog.csdn.net/lin123_00/article/details/103319167

版权

Vuex是一个专为Vue.js应用程序设计的状态管理模式，用于集中管理组件间的通信。它提供了一种规则保证状态在可控环境中变化，简化大型项目中组件之间的通信问题。通过new Vuex.Store()创建实例，其核心选项包括state（存储共享数据）、mutations（同步更新state）、getters（计算属性中获取state数据）和actions（异步操作）。在实际应用中，Vuex帮助开发者组织和管理共享状态，提升代码可维护性。

摘要由CSDN通过智能技术生成

Vuex

　　　　什么是Vuex？

　　　　　　官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

　　　　　　个人理解：Vuex是用来管理组件之间通信的一个插件

　　　　为什么要用Vuex？

　　　　　　我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只有props选项，但这也仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢？嗯..，方法应该有。抛开怎么实现的问题，试想一下，当做中大型项目时，面对一大堆组件之间的通信，还有一大堆的逻辑代码，会不会很抓狂？？那为何不把组件之间共享的数据给“拎”出来，在一定的规则下管理这些数据呢？这就是Vuex的基本思想了。

　　　　Vuex有什么特性？

　　　　怎么使用Vuex？

　　　　　　引入Vuex.js文件

　　　　　　创建实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
    <div id="app">
        
    </div>
</body>
<script>
    Vue.use(Vuex);//在创建Vue实例之前
   var myStore =  new Vuex.Store({
        state:{
            //存放组件之间共享的数据
            name:"jjk"
        },
         mutations:{
             //显式的更改state里的数据
         },
         getters:{
             //获取数据的方法
         },
         actions:{
             //
         }
    });
    new Vue({
        el:"#app",
        data:{
            name:"dk"
        },
        store:myStore,
        mounted:function(){
            console.log(this)//控制台
        }
    })
</script>
</html>

先解释上面代码的意思：

　　　　new V