标签：状态 管理 state getter mutation action vuex store
什么是vuex？
Vuex 是专门为 Vue.js 设计的状态管理库，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单地说就是采用全局单例模式，将组件的共享状态抽离出来管理，使组件树中的每一个位置都可以获取共享的状态（变量）或者触发行为,直白的说就是响应式的全局变量。
vuex核心概念
vuex安装与使用
1.安装vuex（命令）
npm install vuex --save // 如果安装了淘宝镜像，可以使用 cnpm安装
2.新建store.js ( 名字随便起 )，引入vue和vuex，结构如下
在根实例中注册store
3.store中变量的定义、管理、派生（getter）
①state--状态
我们在state中定义属性name，给一个初始值；在store实例中注册state；在组件中使用$store.state.name使用定义的属性name
②mutation--更改store中状态的唯一方法
之所以说唯一，是因为vuex中规定只能通过提交mutation的方式去更改store中的状态，包括action中的操作，也是通过提交mutation去修改。
另外一点就是vuex中规定mutation中不能包含异步操作
一点总结如下：
mutation下事件的调用是通过 this.$store.commit 传入对应的type调用，关于辅助函数 mapMutations 的使用在后面一期讲解
mutation下事件的定义分为无参的和有参的两种形式
mutation事件的调用有两种形式，载荷和对象
③action--异步更改状态
上面在mutation的介绍中提到，mutation中规则上是不允许异步操作的，那如果我们需要异步的进行更改状态怎么办？vuex为我们提供了action。
1.action 与 mutation 除了使用了异步操作和调用mutation，其它使用并无差别
2.异步操作时，可以明显的看到我们设置的信息在延迟1s后发生改变
关于action的一点总结如下：
action中不能直接更改状态，它是通过提交mutation来实现操作
它的参数是一个与 store 实例具有相同方法和属性的 context 对象，所以可以通过context.state来获取store中的状态，可以通过context.commit来提交更改等
action的调用使用 $.store.dispatch
action事件的定义分为有参和无参两种
action事件的触发同样可以使用载荷和对象两种方式
④getter--store中state的派生状态
getter，我们可以理解为是对store中state的一些派生状态，也可以理解为一种计算属性，因为它像计算属性一样，返回值会根据它的依赖被缓存起来，且依赖对象发生改变的时候它才会被重新计算。
关于getter的一点总结如下：
getter类似计算属性，是对store中state的一些派生状态，可以简化代码、便于维护
getter的使用方法 $.store.getters.属性名
getter的定义可以带参可以不带参
vuex辅助函数的使用说明：
vuex的辅助函数有：mapState、mapMutations、mapGetters、mapActions
它们的使用我们可以配合ES6的展开运算符将其与局部计算属性或方法混合使用。使用辅助函数后我们对state、mutation、getter、actiopn的使用可以改成以下这样：
(State => mapState)
(mutation => mapMutations)
(action => mapActions)
(getter => mapGetters)
标签：状态,管理,state,getter,mutation,action,vuex,store 来源： https://www.cnblogs.com/jiangxin123/p/16262346.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。