vue--vuex详解

你的名字 2021-01-29 08:46 836阅读 0赞

###Vuex###

什么是Vuex？

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

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

为什么要用Vuex？

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

Vuex有什么特性？

怎么使用Vuex？

引入Vuex.js文件

创建实例：

先解释上面代码的意思：

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

他有4个核心选项：state mutations getters actions （下文会仔细分析）

这是上面代码：![format_png][]

那如何获取到state的数据呢？

一般会在组件的计算属性（computed）获取state的数据（因为，计算属性会监控数据变化，一旦发生改变就会响应）

![format_png 1][]**state**：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。

getters：有时候，我们需要对state的数据进行筛选，过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据，那我们就必须到处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入 - 两者都不太理想。如果把数据筛选完在传到计算属性里就不用那么麻烦了，getters就是干这个的，你可以把getters看成是store的计算属性。getters下的函数接收接收state作为第一个参数。那么，组件是如何获取经过getters过滤的数据呢？ 过滤的数据会存放到$store.getters对象中。具体看一个例子：<!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">
            <hello></hello>
        </div>
    </body>
    <script>
        Vue.use(Vuex);
       var myStore =  new Vuex.Store({
            state:{
                //存放组件之间共享的数据
                name:"jjk",
                age:18
            },
             mutations:{
                 //显式的更改state里的数据
             },
             getters:{
                 getAge:function(state){
                     return state.age;
                 }
             },
             actions:{
                 //
             }
        });
    
        Vue.component('hello',{
            template:"<p>姓名：{
       {name}} 年龄：{
       {age}}</p>",
            computed: {
                name:function(){
                    return this.$store.state.name
                },
                age:function(){
                    return this.$store.getters.getAge
                }
            },
             mounted:function(){
                console.log(this)
            }
        })
        new Vue({
            el:"#app",
            data:{
                name:"dk"
            },
            store:myStore,
            mounted:function(){
                console.log(this)
            }
        })
    </script>
    </html>

![format_png 2][]

**mutations：**前面讲到的都是如何获取state的数据，那如何把数据存储到state中呢？在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。　　mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东东作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象（其实这个东西跟git的commit很类似）还有一点需要注意：**mutations方法必须是同步方法**！

具体看实例：

<!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">
            <hello></hello>
        </div>
    </body>
    <script>
        Vue.use(Vuex);
       var myStore =  new Vuex.Store({
            state:{
                //存放组件之间共享的数据
                name:"jjk",
                age:18,
                num:1
            },
             mutations:{
                 //显式的更改state里的数据
                 change:function(state,a){
                    //  state.num++;
                   console.log(state.num += a); 
                   
                 }
             },
             getters:{
                 getAge:function(state){
                     return state.age;
                 }
             },
             actions:{
                 //
             }
        });
    
        Vue.component('hello',{
            template:"<p @click='changeNum'>姓名：{
       {name}} 年龄：{
       {age}} 次数：{
       {num}}</p>",
            computed: {
                name:function(){
                    return this.$store.state.name
                },
                age:function(){
                    return this.$store.getters.getAge
                },
                num:function(){
                    return this.$store.state.num
                }
            },
             mounted:function(){
                console.log(this)
            },
            methods: {
                changeNum: function(){
                    //在组件里提交
                    // this.num++;
                    this.$store.commit('change',10)
                }
            },
            data:function(){
                return {
                    // num:5
                }
            }
        })
        new Vue({
            el:"#app",
            data:{
                name:"dk"
            },
            store:myStore,
            mounted:function(){
                console.log(this)
            }
        })
    </script>
    </html>

[format_png]: /images/1611910100058.jpg
[format_png 1]: /images/1611910080778.jpg
[format_png 2]: /images/1611910059632.jpg