vuex是vue.js框架的一款插件,独立于vue组件系统之外,用于大型项目中的公共数据的管理,可以更加方便的进行组件中间数据交互

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

Vuex 是Vue.js 应用程序的状态管理模式 + 库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式改变。

一、vuex使用的场景

vuex是vue.js框架的一款插件,独立于vue组件系统之外,可以更加方便的进行组件中间数据交互, 特别是进行大项目的开发的时候.组件嵌套繁琐,组件间的通信将变的十分麻烦.为了解决组件组件之间公共部分的数据传输困难的问题,便可以使用vue提供的vuex插件。
在一般的小型项目中,当只有简单的父子传值或者兄弟组件传值时,不推荐使用vuex

二、vuex使用步骤

1.在以前的老项目中需要使用vuex时

1.1 先在项目中下包
代码如下（示例）：

npm install vuex@next --save
或
yarn add vuex@next --save

2.导入并注册插件

代码如下（示例）：

 import Vue from 'vue'  //导入vue
 import Vuex from 'vuex'  //导入vuex
 Vue.use(Vuex)   //注册vuex

在vuex的实际开发中,一般是在src文件中建立store/index.js文件进行引入。

3.创建vuex实例并进行导出

代码如下（示例）：

 export defaule new Vuex.store()  //默认导出vuex

一般都是进行默认导出。

4.在vue脚手架项目的mian.js文件中将其挂载到Vue实例身上

代码如下（示例）：

import store from './store/index.js'   //导入vuex文件
new Vue({
  store,  //将其挂载到Vue实例身上,便可进行全局使用
  ....
})

将其挂载到vue身上后 便可以使用$store进行调用。

三、vuex实例中的5个属性的使用方法

1.state:定义公共数据并在组件中使用

代码如下（示例）：

 export defaule new Vuex.store({
    state:{
       num:100
    }
 }) 

如:在Vuex实例中创建state对象,并定义一个num属性,值为100。当在组件中需要使用时
(1).通过 $store.state.属性名 的方法进行使用

代码如下（示例）：

<template>
  <div>
    <p>num : {{ $store.state.num }}</p>  // num:100
  </div>
</template>

注意:在代码中直接进行使用时,需要在前面添加this。

<javascript>
 export default {
  methods: {
    get() {
      thi.$store.state.num+=1
      console.log(this.$store.state.num)
    },
  },
};
</javascript>

(2).通过Vuex-map函数进行使用
通过引入Vuex-map函数将state中的属性映射到组件的computeds属性中进行直接使用
代码如下（示例）：

<template>
  <div>
    <p>num : {{ state名 }}</p>  // num:100
  </div>
</template>
<javascript>
import { mapState } from '@/store/index.js'
 export default {
  computed: {
    ...mapState(['state名1','state名2'...])
    },
  },
};
</javascript>

**注意:**当组件的data中的属性名与state名重复时,会优先显示组件的data属性的值,
此时可以通过修改mapState中的state名解决这个问题
代码如下（示例）：

<javascript>
import { mapState } from '@/store/index.js'
 export default {
  computed: {
    ...mapState({新名字:'state名'})
    },
  },
};
</javascript>

小结:
1.state属性用于定义和管理公共数据,只要是需要通过vuex进行传递的数据,都必须在vuex中进行定义
2.state的作用是：保存公共数据（多组件中共用的数据）
3.state是响应式的： 如果修改了数据，相应的在视图上的值也会变化。

2.mutations:修改公共数据

通过调用mutations来修改定义在state中的公共数据。

在实例中定义mutations属性

代码如下（示例）：

new Vue.store({
  // 省略其他...
  mutations：{
    // 每一项都是一个函数，可以声明两个形参
  	mutation名1：function(state [, 载荷]) {
  
    },
    mutation名2：function(state [, 载荷]) {
  
    },
	}
})

每一项都是一个函数，可以声明两个形参：

第一个参数是必须的，表示当前的state。在使用时不需要传入
第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据
(1).通过 this.$store.commit.属性名 的方法进行使用

代码如下（示例）：

this.$store.commit('mutation名', 需要传入的实参)

注意:这里的commit是固定的方法。

(2).通过Vuex-map函数进行调用
通过引入Vuex-map函数将mutations中的属性映射到组件的methods属性中进行直接使用
代码如下（示例）：

<javascript>
import { mapMutations } from '@/store/index.js'
 export default {
  methods: {
    ...mapMutations(['mutations名1','mutations名2'...])
    },
  },
};
</javascript>

注意:
mutations是映射到methods中,使用时需要按照methods中的方法形式进行使用
碰到重名时,与state的方法一致

代码如下（示例）：

<template>
  <div>
    <button @click="mutations名()">点击使用vuex中的方法</button>  // num:100
  </div>
</template>

小结:
mutations的中文含义是：变异。 它是Vuex中用来修改公共数据的唯一入口。

3.getters:在state中的数据的基础上，进一步对数据进行加工得到新数据。

其作用与组件中computed一样,对vuex中state中的现有属性进行计算。

在实例中定义getters属性

代码如下（示例）：

new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    getter的名字1: function(state) {
      return 要返回的值
    }
  }
})

在组件中通过：$store.getters.getter的名字 来访问,直接展示return出来的值

代码如下（示例）：

$store.getters.getter的名字1

(2).通过Vuex-map函数进行调用
通过引入Vuex-map函数将getters中的属性映射到组件的computed属性中进行直接使用
代码如下（示例）：

<javascript>
import { mapGetters} from '@/store/index.js'
 export default {
  computed: {
    ...mapGetters(['getters名1','getters名2'...])
    },
  },
};
</javascript>

注意:
getters遇到重名时,与state的解决方法一致

小结:
mutations的中文含义是：变异。 它是Vuex中用来修改公共数据的唯一入口。

4.actions:发异步请求。

我们可以使用Action来修改state，这一点是类似于 mutation的，不同在于：

 action中可以通过调用 mutation来修改state，而不是直接变更状态。
 action 可以包含任意异步(例如ajax请求)操作。

在实例中定义getters属性

代码如下（示例）：

new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改/保存数据
      
      // context.commit('mutation名', 载荷)
    }
  }
})

在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action

代码如下（示例）：

$store.getters.getter的名字1

(2).通过Vuex-map函数进行调用
通过引入Vuex-map函数将actions中的属性映射到组件的computed属性中进行直接使用
代码如下（示例）：

<javascript>
import { mapActions} from '@/store/index.js'
 export default {
  methods: {
    ...mapActions(['actions名1','actions名2'...])
    },
  },
};
</javascript>

注意:
actions遇到重名时,与state的解决方法一致

小结:
mutations的中文含义是：变异。 它是Vuex中用来修改公共数据的唯一入口。

5.modules:拆分复杂业务。

随着项目越来越大，需要放在vuex中的数据越来越多，整个store/index.js中代码会越来越长，这个时候就需要拆分模板，把复杂的场景按模块来拆开：

代码如下（示例）：

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
  	模块名1： {
    		// namespaced为true，则在使用mutations时，就必须要加上模块名
      	namespaced: true, 
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
  			modules: {}
  	}，
    模块名2： {
        // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
         modules: {}
  	}  
  }
})

也可以更进一步对文件进行拆分。

代码如下（示例）：

|--store /
|------- index.js # 引入模块
|------- modules
|-------------- / mod1.js # 模块1
|-------------- / mod2.js # 模块2

访问数据和修改数据的调整
访问模块中的数据，要加上模块名

    获取数据项：  {{$store.state.模块名.数据项名}}
    获取getters： {{$store.getters['模块名/getters名']}}

访问模块中的mutations/actions:

      如果namespaced为true，则需要额外去补充模块名
      如果namespaced为false，则不需要额外补充模块名

$store.commit('mutations名')        // namespaced为false
$store.commit('模块名/mutations名')  // namespaced为true

小结
使用了modules之后，在访问数据时就要额外添加modules的名字了。

结论： 在使用modules时，建议都给加上namespaced!

总结