Vuex

缺乏、安全感 2023-07-21 08:51 4阅读 0赞

###  ###

*   *  什么是Vuex？可以解决什么问题？
     *  Vuex有哪些属性？
     *  使用方法
     *  在组件中引入Vuex
     *  Vuex dispatch和commit来调用mutations的区别

## 什么是Vuex？可以解决什么问题？ ##

Vuex是Vue.js应用程序的状态管理模式+库。  
Vuex是一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化。

## Vuex有哪些属性？ ##

1.  state：即Vuex中的基本数据
2.  getters：相当于state的计算属性
3.  mutation：提交更改数据的方法，必须是同步函数
4.  action：像一个装饰器，包裹mutations，使之可以异步
5.  modules：模块化Vuex

## 使用方法 ##

在vue-cli已安装Vuex的情况下，直接引用。  
**如果没有安装的话：**

1.  安装Vuex，使用命令：cnpm install vuex --save 进行安装
2.  在src下新建一个名为vuex的文件夹
3.  vuex文件夹里面新建一个store.js  
    ![在这里插入图片描述][20200403111647764.png]
4.  在刚刚创建的store.js引入vue和vuex，并且使用use Vuex  
    ![在这里插入图片描述][20200403111811363.png]
5.  定义数据  
    ![在这里插入图片描述][20200403111922445.png]
6.  定义方法  
    ![在这里插入图片描述][20200403112259734.png]
7.  实例化Vuex.store  
    ![在这里插入图片描述][20200403112322588.png]
8.  暴露  
    ![在这里插入图片描述][20200403112400941.png]

完整代码如下

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    
    //state在vuex中用于储存数据 state=状态
    var state = { 
        count: 1
    }
    
    // mutations里面放的是方法，方法主要用于改变state中的数据 mutations=改变
    var mutations = { 
        incCount(){ 
            ++state.count;
        }
    }
    
    //vuex 实例化 Vuex.store
    const store = new Vuex.Store({   //store储存
        state,
        mutations:mutations
    })
    
    // 暴露
    export default store;

## 在组件中引入Vuex ##

1、在组件中引入store.js  
2、注册  
![在这里插入图片描述][20200403112534459.png]  
3、获取state里面的数据  
第一种：this.$store.state  
![在这里插入图片描述][20200403112633386.png]  
第二种：  
![在这里插入图片描述][20200403112807286.png]  
4、触发mutations改变state里面的数据

this.$store.commit(‘incCount’)  
![在这里插入图片描述][20200403113009179.png]  
完整代码如下

<template>
      <div class="hello">
        <h1>{ {  this.$store.state.count }}</h1>
      </div>
    </template>
    
    <script>
    import store from "../vuex/store.js" //引入store
    export default { 
      data () { 
        return { 
          msg: store.state.count
        }
      },
      store,  //注册
      methods:{ 
        incCount(){ 
          this.$store.commit('incCount');  /*触发 state里面的数据*/
        }
      }
    }
    </script>

## Vuex dispatch和commit来调用mutations的区别 ##

dispatch：含有异步操作，例如向后台提交数据。

写法：this.$store.dispatch('mutations方法名'，值)

commit：同步操作

写法：this.$store.commit('mutations方法名'，值)

[20200403111647764.png]: /images/20230528/574a178b74f44beb95eb217ede65a542.png
[20200403111811363.png]: /images/20230528/0f782e28ed7e4b659ae2b1f65ed6bbfb.png
[20200403111922445.png]: /images/20230528/6153b109b1444f5b875b5f947a40793e.png
[20200403112259734.png]: /images/20230528/6e57893cc6084ddca16b658268128a1e.png
[20200403112322588.png]: /images/20230528/369ca799cf7d4f1c9c5ade8e80f98c8d.png
[20200403112400941.png]: /images/20230528/1be84180451c41e3bd2e2ddffa2d6f9b.png
[20200403112534459.png]: /images/20230528/3b933ff67c8d4eb2ad408b7fcb6883c0.png
[20200403112633386.png]: /images/20230528/c32a01d1d7804ead9ffd90f43b1e9ee9.png
[20200403112807286.png]: /images/20230528/ad5cb36f1ab5449b82e20ad3d5f2439c.png
[20200403113009179.png]: /images/20230528/beed71d3e8c6491d9ff15546538760ec.png