vuex小白入门

1.Vuex是什么？

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

2.使用Vuex统一管理状态的好处

• 能够在vuex中集中管理共享的数据，易于开发和后期维护
• 能够高效的实现组件直接得数据共享，提高开发效率
• 储存在vuex中的数据都是响应式的，能够实现数据与页面的同步

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

1. Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。
2. 不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改（没了解过这里没关系，下一节前端君会有介绍）。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

4.什么样的数据储存在Vuex中

一般情况下，只有组件之间共享的数据，才有必要储存在vuex中，对于组件的私有数据，依旧储存在自身的data中即可。

5.使用vuex

1.安装

npm install vuex -S   //S代表生产环境使用

2.引入

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

3.创建store

const store = new Vuex.Store({
   
	state:{
   count:0}   //state中存放的就是全局共享的数据
}) 

4.将store对象挂载到vue实例中

new Vue({
   
	el:"#app",
	render:h => h(app),  //渲染app和组件
	router,              //挂载路由
	store				
})

5.vuex主要包括以下几个模块

• State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
• Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
• Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
• Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
• Module：可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割