Vuex(Vue状态管理模式)

一、初识vuex

1、关于vuex

VueX是适用于在Vue项目开发时使用的状态管理工具。用来管理和维护vue项目中组件之间传递的参数，我们只需要把这些值定义在vuex中，即可在整个vue项目中使用

2、安装vuex

二、vuex中的核心内容

在vuex对象中，除了state，还有用来操作state中数据的方法集，以及对state中数据加工的方法集等等。

vuex重要的六大模块

• state 存放状态、存放需要使用或加工的参数
• mutations 对state成员进行操作
• getters 加工state成员给外界，类似于计算属性
• actions 异步操作
• modules 模块化状态管理
• plugins 在vuex中引入插件

一、state–存放状态，于mutations对state的操作方式
在state中存放一些我们在视图，或接口中需要的参数，在参数传递到vuex中需要使用mutations来协助保存，比如：

getRes(state,res){
            state.newObj=res
        }

那么我们在页面中该如何调用这个方法呢？

this.$store.commit('getRes',res})

我们可以直接通过commit来找到mutations中定义的方法，第二个参数就是我们需要传递的参数，如果需要传递两个参数可以通过对象来传递，比如：

this.$store.commit('getRes',{name:'张三',age:'26'}})

除此之外还有另一种提交方法:

this.$store.commit({
    type:'getRes',
    payload:{
        name:'张三',
        age:'26'
    }
})

经过以上任意一种操作后，state中的newObj已经赋上了值，我们就可以全局使用。

那么还有就是通过Mutations来对state中某个对象的键值对进行修改，新增或删除：

• Vue.set 为某个对象设置成员的值，若不存在则新增
  例如对state对象中添加一个age成员

Vue.set(state,"age",15)

-Vue.delete 删除成员

Vue.delete(state,'age')

把刚刚添加的age删除

二、getters

getters可以对state中成员加工后传递给外界，类似与计算属性，需要有return值
在getters中有两个默认参数，

1. state当前VueX对象中的状态对象，也就是整个state
2. getters当前getters对象，可以把getters中的其他方法拿来使用

举个例子

getters:{
    nameInfo(state){
        return "姓名:"+state.name
    },
    fullInfo(state,getters){
        return getters.nameInfo+'年龄:'+state.age
    }  
}

那么我在视图中显示就是，名字和年龄拼接出来的字段
那么我们在组件中调用是如何调用的呢？
其实也很简单，就一行代码，上代码

this.$store.getters.fullInfo

比如：

<span>{{this.$store.getters.fullInfo}}</span>

这样就能在视图中显示

三、actions

话不多说先上代码

可以看出我们通过this.$store.dispath('DomeIn',10),执行了actions中的DomeIn，并且传递了一个10的参数，
那么在actions中是不能直接处理或加工参数的，那么他能做的就是执行异步代码（我在这里写了一个setTimeout，模拟axios），数据处理依旧在mutations中处理，
这时候就开始小小的脑袋，大大的问号了，为什么不直接在mutations中处理，要把异步和处理逻辑分开，那不是多此一举么？
那么我们要明白，既然他有这么一个方法那肯定不是为了麻烦，一定是为了解决某些问题，如果我们直接在mutations方法中直接进行异步操作，会引起数据失效，所以才专门提供进行异步操作的actions，最终提交mutations方法

说了这么多咱么来总结一下

1. Actions 是用来执行异步操作的，但不能直接操作数据，要调用其他模块中的方法
2. Actions 有两个参数 state/val 这个就不用多说了
3. Actions 在组件中的调用

this.$store.dispatch('aEdit',{age:15})

需要注意的是：在这里是通过dispatch找到的方法

四、modules

modules可以理解为把状态分类放进不同的仓库，或者说模块化管理模式。Vuex允许我们将store分割成模块，每个模块都拥有自己的state、mutation、action、getter甚至是嵌套子模块

1. 首先
   
   2. 在js文件中export default一个对象（模块），拥有自己的state、mutation等

export default {
    state: {
        arr:{}
    },
    mutations: {
        getRes(state,res){
            state.arr=res
        }
    },
}

3. 在index.js中import我们之前在store中创建的js文件，再通过modules创建模块

//引入
import user from './user.js'

modules:{
        user
    },

3. 那我们要如何把数据区出来呢？

this.$store.state.user.arr

这样就可以找到我存储的arr,如果迷惑的话，可以自行打印一下this.$store.state看一下他的数据结构，就清晰了

五、plugins

plugins就是下载插件配置vuex
详情：点击跳转文档