vuex简介

vuex 是一个专为vue.js 应用程序开发中管理的一个模式。通过创建一个集中的数据存储，方便程序中的所有组件进行访问(vuex就是状态管理工具，数据管理工具)

传统vue使用场景：

传统vue是单向数据流。如果是兄弟组件之间传值兄弟组件间的状态传递无能为力，我们经常会采用父子组件通过正向/逆向传值来对数据进行传递。以上的这些模式非常脆弱，通常会导致无法维护的代码。

 

 

 

vuex：

只能用于单个页面中不同组件（例如兄弟组件）的数据流通。

安装：npm install vuex --save       配置vuex文件创建在src中创建store文件夹–>与store.js

ps：使用vscod编辑器，直接在创建项目的时候选择vuex就好了，不用单独下载

vuex 使用单一状态 ==> 用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 ”而存在。这也意味着，每个应用将仅仅包含一个 store 实例

使用：

1、创建vuex实例：将vuex赋值给一个变量并暴露出去

      vuex中的数据源state，需要保存的数据就保存在这里

 

 

 2、vuex–使用数据源：要使用首先在全局main.js引入vuex

 

 

vuex中的数据源state，需要保存的数据就保存在这里，将数据放在state中

 

 

 在需要使用这些数据的文件中可以使用$store.state.xx调用数据

 

 

 页面效果：

 

 

 

 

 

 

vuex介绍：

State：Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。

            state里面存放的数据是响应式的，Vue组件中从store中读取数据，若是store中的数据发生了改变，依赖这个数据的组件也会发生改变

Mutations：vuex中修改数据的地方。在Vuex中修改数据只能在Mutations中，不能再其他地方修改。

                   mutations 里面装着一些改变数据方法的集合，就是把处理数据逻辑方法全部放在mutations里面（当触发事件的时候想改变state数据的时候使用mutations）
                   注意：不能直接调用一个 mutations 中的处理函数 要使用this.$store.commit(“mutations中你要修改的函数名”) 来进行调用

在vuex 的mutations 中修改

 

 

 在需要修改的地方调用（随便页面什么地方或者组件中都可以）

 

 

 vuex-Mutations 提交载荷（Payload）

在实际项目中往往会有值传递给Mutations 给store.commit传一个附加参数，他就叫做mutation的载荷。也就是在调用vuex中的方法的同时，可以传递一个参数过去，对vuex中的数据进行了修改。
如果需要传递多个参数可以直接传递一个对象如：this.$store.commit(‘add’, { ‘num’: 20 } )

 

 

 

 

 

 在此处刷新页面会发现数据都是，接下来就是结局刷新数据丢失问题，解决方法如下：在哪个页面中引用的组件数据丢失了，就在哪个页面加上以下代码就可以

created () {
        //在页面加载时读取localStorage里的状态信息
        if (localStorage.getItem("data") ) {
            //replaceState替换数据 Object.assign合并对象
            this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("data"))))
        } 
        //在页面刷新时将vuex里的信息保存到localStorage里
        window.addEventListener("beforeunload",()=>{
            localStorage.setItem("data",JSON.stringify(this.$store.state))
        })
      }

Getters：vuex中的过滤器，getters属性主要是对于state中数据的一种过滤，使用场景：在项目开发中，有时候希望对state中的某个属性在多个组件中展示出不同状态

在vuex中对数据进行修改

 

 

 在需要使用对应数据的地方掉getters中的方法

 

 

 Actions：可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据（但是还是通过mutation来操作，因为只有它能操作）

1、下载axios
2、需要创建api文件夹用来容纳我们的数据请求封装的文件。
3、开始在对应的api文件中进行数据请求的promise的封装

 

 4、因为要完成异步请求，所以在vuex要从actions中来编写数据请求操作

      调用在api文件夹下封装的数据请求

 

在actions中使用调用的数据请求，将数据交给mutations，actions中的context代表store对象

mutations中的payload为形参，用来接收actions传递过来的数据
在mutations中将数据复制给state中的任意一个变量，那么就可以在页面使用这段数据了

 

Module：可以让每一个模块拥有自己的state、mutations、action、getters,使得结构非常清晰，方便管理。在Vue中State使用是单一状态树结构，不应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理

1.在src下创建一个api文件夹，在文件夹中建一个js文件-引入axios，使用pormise对异步操作进行封装

 

 2.在vuex中引用模块

在store下创建一个文件夹module，在文件夹从写一个js文件（用来操作对应api文件中请求的数据）

引用前面api文件中的js文件，并对数据进行操作

 

 3.在页面中使用数据

 

 

 

 

转载：https://blog.csdn.net/weixin_48653480/article/details/108695411