#vueX
**前言：
我们接触过vue.js的 一定知道在vue中各个组件之间传值的痛苦，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，那么接下来我们就来学习一下vuex是如何修改状态值的：**
一：什么是vuex？
1.1：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态（他是集中管理数据的工具）。
1.2 vuex的优点：
- 可以实现父子传值，兄弟传值，隔代传值
- 能够存放组件之间共享的数据
- 解决大中型项目中数据共享的问题
二：vuex的组成？
1.state：存储状态（变量）
2. getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们 在组件中使用$ store
3. mutations： 修 改 状 态 ， 并 且 是 同 步 的 。 在 组 件 中 使 用$ store.commit(‘‘",data)。这个和我们组件中的自定义事件类似。
4. actions：异步操作。在组件中使用是$store.dispath(‘自定义事件名‘,‘‘传递的参数)
5. 5. modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。
三：玩转vuex的两种方法：
3.1 第一种：
3.1.1 安装：
npm installl vuex --save
3.1.2 创建一个store文件夹，里面放入index.js。在main.js里面引入，注册。
3.1.3 操作一波~
###### 页面
javascript <template> <div class="home"> <h3>这是主页</h3> <button @click="prev()">减</button> {{this.$store.state.count}} <button @click="next">加</button> </div> </template> <script> import { Sumcode } from ‘../http/api‘; export default { name: ‘Home‘, methods: { next(){ this.$store.dispatch(‘next‘,)//通过dispatch请求发送到action } }, } </script> ``` ###### store.js ```javascript import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex) export default new Vuex.Store({ //用来存储数据的 state: { count: 1 }, mutations: { //在motations里面我们改变state的状态来实现数量的加加减减 next(state,value){ state.count++; }, prev(state){ state.count--; }, }, actions: { //在这里我们异步操作 发送到motation里面 next(context){ context.commit(‘next‘) }, prev(context){ context.commit(‘prev‘) }, }, //这个也就是我们上面所说的store 的子模块。这样的话比较清晰 modules: {}, getters:{}//这个相当于我们vue中的computed计算属性 // 页面中我们直接通过this.$store.state.getters.data })
原文：https://www.cnblogs.com/gjf-7/p/13031304.html