vuex的属性和使用方法

一.简介

vuex的官方介绍

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

Vuex采用类似全局对象的形式来管理所有的组件的公用数据，如果想修改这个全局对象的数据，需要安装Vuex提供的方式来修改

二、优点

Vuex状态管理跟使用传统全局变量的不同之处：

1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。

2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改（没了解过这里没关系，下一节前端君会有介绍）。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

三、步骤

1、安装Vuex

npm install vuex --save

2、引用Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
```

3、创建仓库Store

要使用Vuex，我们需要创建一个实例store仓库

```
 //创建一个 store
 const store = new Vuex.Store({});
```

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008133354162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lkcnB3,size_16,color_FFFFFF,t_70#pic_center)
### 主要包括以下几个模块
State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。

Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

Module：可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。

#### 1、state
state：vuex的基本数据类型，用来存储变量

```
 //创建一个 store
 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    }
 });
```
在vue中使用this.$store.state.count
#### 2.Getters
```
我们可以任务getters为store的计算属性，类似于computed，对state的数据进行过滤，改造等
```

假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的 getters

getters 接受 state 作为其第一个参数

```
 const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数：5
   },
   getters:{
      newCount:state => state.count * 3
   }
 });
```
在vue中使用this.$store.getters.newCount
在组件中获取{{ newCount }}方式：

```
export default {
  computed: {
      newCount(){
          return this.$store.getters.newCount;
      }
  }
};  
```

#### 3.Mutations
```
mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
```

我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方

会接受 state作为第一个参数，第二个是自定义传参

```
 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    mutations:{
        increment(state，value){
            state.count += value;
        }
    }
 });
commit：同步操作，写法： this.$store.commit("mutations方法名",值)

```
我们在提交commit时候，字符串参数increment,就是对应在 mutations中的increment。
一般通过方法或钩子触发，例如：

```
 methods: {
   getVal(event) {
     //获取当前的按键的值
     let value = event.target.dataset.value;
     //通过commit提交一个名为increment的mutation
     this.$store.commit("increment", value);
   }
 }
```
在组件中获取{{ count }}

```
export default {
  computed: {
      count(){
          return this.$store.state.count;
      }
  }
};  
```

#### 4、Action
```
用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
只有通过action=>mutations=>states,这个流程进行操作,具体步骤如下：
```

```
export default new Vuex.Store({
  //存放数据
  state: {
    obj: {}, 
  },
  //4.通过commit mutations中的方法来处理
  mutations: {
    getParam (state,Object) {
	   //5.修改state中的数据
       state.obj= Object
    }
  },
  //2.接受dispatch传递过来的方法和参数
  actions: {
    getParamSync (context,Object) {
	    //处理异步操作
        setTimeout(()=>{
	        //3.通过commit提交一个名为getParam的mutation
	        //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
            context.commit('getParam',Object)
        },3000)
    }
  }
})
```

dispatch：异步操作，写法：this.$store.dispatch("mutations方法名",值)

```
 methods: {
   getVal() {
	  let name= 'xia';
	  let age= '26';
	  let sex= 'man';
	  //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
	  this.$store.dispatch('getParamSync',{name,age,sex})
   }
 }
```

#### 5、Modules
随着项目的复杂度增加，为了方便管理Vuex，一般会将其按功能划分不同的模块（这就是模块化开发）每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

```
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'

import moduleA from './module/moduleA' // 模块A
import moduleB from './module/moduleB' // 模块B

Vue.use(Vuex)

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    modules: {
        moduleA,
        moduleB
    }
})
```
moduleA.js / moduleB.js 文件

```
// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}
```
然后我们就在组件中这么调用

```
<template>
	<div class="demo">
		<h1>{{getText1}}</h1>
		<h1>{{getText2}}</h1>
	</div>
</template>
```
```
computed: {
    getText1(){
    	return this.$store.state.moduleA.text;
    },
    //或
	...mapState({
		getText2: state => state.moduleB.text;
	})
}
```
由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问。