2019-02-28 Vuex 入门

2019-02-28  本文已影响0人  qiaoguoxing

Vuex

   什么是Vuex?

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

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

  为什么要用Vuex?

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

<!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 Vuex.Store({}) 表示创建一个Vuex实例,通常情况下,他需要注入到Vue实例里. Store是Vuex的一个核心方法,字面上理解为“仓库”的意思。Vuex Store是响应式的,当Vue组件从store中读取状态(state选项)时,若store中的状态发生更新时,他会及时的响应给其他的组件(类似双向数据绑定) 而且不能直接改变store的状态,改变状态的唯一方法就是,显式地提交更改(mutations选项)

他有4个核心选项:state mutations  getters  actions   (下文会仔细分析)

原文链接   https://www.cnblogs.com/first-time/p/6815036.html

上一篇 下一篇

猜你喜欢

热点阅读