前端框架 vue---vuex

1、一、npm安装

3、三、来简单讲一下vuex的一些比较常用到的4个核心概念：state、getter、mutation、action(1)state每个vuex应用的核心就是store（仓库）。说白了，‘store’它就像一个仓库、一个容器，用它来存储应用中的态状（state）。即此，它包含着你的应用中大部分的状态。下面介绍一下vuex与单纯的全局对象有以下两点不同：1.vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。2.我们不能直接去改变 store中的状态（改变store中的状态，其实就是改变store中的值）。想要改变store中的状态的唯一途径就是显式地提交（commit）mutation。接下来，我们去创建一个简单的statestore.js 文件中：

5、(2)gettervuex允许我们在store中定义'getter'(getter可以认为是store的计算属性)，就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。下面我们创建一个getter：getter它会接收state作为第一个参数

7、getter还可以接收其他的getter作为第二个参数：

9、现在我们去触发mutation handler，来改变store中的状态，但是我们又不能直接去调用一个mutation handler。这个选项更像是事件注册：‘当触发一个类型为increment的mutation时，调用此函数’，所以，要触发一个mutation handler，你需要以相应的type调用store.commit方法：

11、怎么去调用呢，其实和之前的一样，同样调用store.commit()方法⚠️mutation必须是同步的

13、action函数会接受一个与store实例具有相同方法和属性的context对象(并非一定是context，可以是任意参数)，context类似于store，你可以把context当作store，但两者还是有区别的。这样的话你就可以调用context.commit来提交mutation，或者也可以通过context.state和context.getters来获取state和getters。我们通过前面可以知道，mutation通过store.commit()来触发回调函数，那么action又是通过什么呢？action通过store.dispatch方法触发：先更新到这吧，回头继续补充！！！！