的核心是 Store（仓库），相当于是一个容器，它包含着你的应用中大部分的状态 (state)，一个 Store 实例中包含以下属性的方法：

state ：定义属性（状态、数据）
Getter：对state进行加工，派生state的额外状态
action：响应组件中用户的动作
mutations: 专门书写方法,用来更改（更新） state 中的值

由于store中的状态是响应式的，在组件中调用store中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的methods中提交mutation。

可以通过store.state来获取状态对象，并通过store.commit方法触发状态变更

store.js 中写入：

state 定义属性（状态 、数据） store.js 中写入： // 定义属性（数据） 
var state = { count:6 } // 创建 store 对象 
const store = new Vuex.Store({ state }) // 导出 store 对象 export default store;

二、调用vuex

方式1、在 app.vue 中就能通过 this.$store 访问该 store 对象，获取该 count 。

<template> <div id="app"> //把 count 方法直接写入，可自己执行 <h1>{{count}}</h1> </div> </template> <script> export default { name: 'app', computed:{ count(){ //返回获取到的数据 return this.$store.state.count } } } </script>

方法2：vuex 提供的 mapGetters 和 mapActions 来访问store对象

mapGetters 用来获取属性（数据）

① 在 app.vue组件中引入 mapGetters

import {mapGetters} from 'vuex'

②在 app.vue 文件的计算属性中调用 mapGetters 辅助方法，并传入一个数组，

在数组中指定要获取的属性 count

<script> import {mapGetters,mapActions} from 'vuex' export default { name: 'app', computed:mapGetters([ //此处的 count 与以下 store.js 文件中 getters 内的 count 相对应 'count' ]) } </script>

getters配置项

对state数据进行加工，生成的额外状态

概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
可以看过state的计算属性
getter接受state作为第一个参数

state的额外状态，随着state的变化而做出相应改变的

getters主要是从state之中派生出的额外的状态。类似于vue对象之中的computed了，对state进行额外加工。getters对象之中的每一个元素都是一个方法，传递state对象作为参数。并且getters是会缓存相关的计算数据的，并会随着state的变化而做出相应改变的。

state: { appName: "App" }, getters: { firstLetter:(state) => { return state.appName.substr(0, 1) } }

读取方式

1.this指针之中$store状态管理对象之中的getters来获取模块之中的管理对象。

当设置了namespaced的时候，我们需要通过相应的模块名称 / getter名称的形式来获取对应的getter内容。如果没有设置namespaced的时候，则可以直接通过getter名称来获取。

2.通过mapGetters来进行getter的获取，

我们同样可以引入getter为自己所用。全局状态管理模块的getter获取不在话下，但是模块状态管理对象有没有设置命名空间也会影响getter的获取。当没有设置的时候，mapGetters可以直接获取当前模块状态管理对象的getters。设置了的话则不行。

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情”

vue-x

store.js 中写入：

二、调用vuex

getters配置项