vuex详解

(1).vuex的state、getter、mutation、action、module特性分别是什么？

vuex 的几个核心概念Store：Vuex 使用一个 Store 对象管理应用的状态，一个 Store 包括 State, Getter, Mutation, Action 四个属性。
State：State 意为“状态”，是 vuex 状态管理的数据源。相当于存放变量的容器
Getter：Getter 的作用与 filters 有一些相似，可以将 State 进行过滤后输出。
Mutation：Mutaion 是 vuex 中改变 State 的唯一途径（严格模式下），并且只能是同步操作。Mutaion 使得状态变得可追踪，配合一些 devtools 可以实现 time-travel 的调试体验。
Action：一些对 State 的异步操作可以放在 Action 中，并通过在 Action 提交 Mutaion 变更状态。
Module：当 Store 对象过于庞大时，可根据具体的业务需求分为多个 Module。

(2).vuex中actions和mutations有什么区别？

action 提交的是 mutation，而不是直接变更状态。mutation可以直接变更状态。

action 可以包含任意异步操作。mutation只能是同步操作。

提交方式不同，action 是用this.$store.dispatch{(}^{\prime }ACTIO{N}_{N}AM{E}^{\prime },data)来提交。mutation是用this.$store.commit(‘SET_NUMBER’,10)来提交。

接收参数不同，mutation第一个参数是state，而action第一个参数是context。

(3).vuex使用actions时不支持多参数传递怎么办？

在使用vue components dispatch Vuex actions的时候需要传递参数给多个参数actions
但是在actions 只是可以接收到两个参数的问题

调用的时候 第二个参数传递成多个元素的对象这样在actions 中第二个参数就可以搞定了
this.$store.dispatch(‘delTask’, {task, index});

(4).请求数据是写在组件的methods中还是在vuex的action中？

如果项目中使用vuex的话，建议存入vuex中，

因为actions可以执行异步操作。

简单的页面放在methods里面即可。比较复杂，或者重要建议放在vuex中，容易维护，代码清晰,并且调用简单，这个在项目后期很重要。

（5).怎么监听vuex数据的变化？

//利用计算属性computed: {listData() { return this.$store.state.listData;} },

//监听执行 watch: { listData(val) {写上你需要的东西 }},

(6).页面刷新后vuex的state数据丢失怎么解决？

一种是state里的数据全部是通过请求来触发action或mutation来改变(基本不可行，除非项目很小或者vuex存储的数据很少)

另一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中

而第二种可以保证刷新页面数据不丢失且易于读取。

//在页面加载时读取sessionStorage里的状态信息

//在页面刷新时将vuex里的信息保存到sessionStorage里

(7),.你有使用过vuex的module吗？主要是在什么场景下使用？

我们使用vuex 需要实例化一个Vuex的Store构造函数。 modules 中则是我们自定义注册的module. 每个module 中都有自己独立的state, action, mutation, getter… 。通过它来区分更新/调用 对应的vuex 方法来隔离未知数据更新等数据相关问题。
开发时，我们可能会有个变量，并且该变量在A和B两个页面都在使用，如果该变量的值在A页面发生了改变，我们希望B页面的该变量也会同时改变，这时候在Vue里就需要用到Vuex

1. 定义
   Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
   以前的数据都是散装的，各个组件都有自己的状态，需要把这个组件的数据运到另一个组件，可以通过自定义属性等这些来传。
   vuex的数据是把数据都放到统一的仓库里面。

使用步骤： 在src中新建store----index.js 安装npm i vuex

在store的仓库里面定义仓库之后，也要到main.js中引入仓库

如果想要使用这个vuex中管理的数据，建议使用计算属性。即为从store中读取数据最简单的方法就是计算属性 计算属性需要一个返回值

使用的时候用this.$store.state.count，就像路由一样，在main.js中引入后，使用时用this.$route

一个vuex只能有一个仓库，一个仓库里面只能有一个state,用一个对象来包含所有的状态层级。
通过根实例中注册store选项，该store实例会注入到跟组件下的所有子组件中，且子组件能通过this.$store访问到，

总结：使用store步骤：
1，在main.js中引入，
2，在store中的index.js中写全局的仓库

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)


// 暴露  全局仓库
let store= new Vuex.Store
// 定义 应用的状态
// 应用的唯一数据源
({
state:{
    count:1,
    cart:[{
        id:1,
        name:"oppo"
    },{
        id:2,
        name:"apple"
    }]
}
})
export default store

3，在组件中使用


每使用一个数据都要写一次计算属性，麻烦，由此引入辅助函数。
mapState 是辅助生成计算属性的函数 (返回多个计算属性的对象)
对象会拥有 字符串 同名的计算属性，计算属性返回store中同名的state

但是这个写法有个弊端，万一还有其他计算属性怎么办
用对象扩展运算符能解决这个问题

下面是vuex的图解

视图里面的数据是通过vuex里面的state获取到的

已经完成了开始的一点，把数据从state里面渲染到vue components的视图中

不能直接在视图中写事件，在methods中去改变store中的值，应该在mutation中去改变store中的值

在mutation里面不能做异步操作，mutation必须是同步函数

getter就是state的计算属性，如果有些复杂表达式写起来麻烦可以用getter
使用过程：在store中的index.js中写.
接图片中的文字，第一个参数是state,第二个参数是因为组件中的计算属性可以依赖于另外一个计算属性，这里面也是一样，如果这里面的getter要依赖于另外一个getter，就可以从第二个参数这里来获取第二个getter

关于辅助函数，因为store已经在main.js中引入了，所以可以在下面这个vue组件中可以直接使用this.$store

关于mutation，也是写在store中的index.js中，用来修改state,写在这里相当于是一个函数，我们想办法来触发这个函数

this.￥store.commit这是$store的方法的方法，
修改state只有一种方法，通过提交mutation,在mutation函数里面来修改state。下面图片里面的increment是定义在store中index.js里面的mutation函数，在下图中的this.*store.commit即为触发定义在mutation里面的increment函数

上面这个比较麻烦，还可以用辅助函数mapMutation

执行这个方法会提交一个increment的mutation

现在每次都让count递增，但是递增的值都是死的，都是1，应该让值变成活的，想让它递增几就递增几，这就涉及到了payload负载，所以可以向multation函数传递参数，参数名字叫payload
加了一个参数5，



每个mutation都有一个字符串的数据类型和一个回调函数，
payload写成对象的形式，对象有个好处，可以传多个属性。
那么mutation里面也要改一下，变成payload.n 如下图所示。
因为我们要的是payload对象，我们要的是在payload对象的n属性里面

mutation必须是同步函数，不能异步。
不在action里面直接修改state，在action里面提交Mutation，在mutation中修改state

Action类似于mutation,不同在于：
Action提交的是mutation，而不是直接变更状态。
Action可以包含任意异步操作。
action里面可以提交mutation,但是不允许在action里面直接修改state,而是在action里面去提交mutation,mutation来修改state

辅助函数·


只有异步操作必须需要action来完成，

###modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。