vuex

vuex的梳理

• vue项目中不可避免的要进行数据管理，可以选择使用localhost或者父子传值，兄弟传值的问题，但是，如果是祖上十八辈给你传值，那么，这应该是传家宝吧（要每一代每一代的传递给下一代，知道传到需要用的地方）这时候，还是要使用父子传值就太繁琐了，而且，如果有出现问题并不是很快的定位到错误的地址，所以引出vuex这个概念

Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行更改。--------vuex官网给出的解释
如果理解了这个图，vuex就应该很好去理解了

Vuex存储与普通全局对象的不同之处有两点：
Vuex存储是反应性的。当Vue组件从中检索状态时，如果商店的状态发生变化，它们将作出反应并有效地进行更新。
您不能直接更改商店的状态。更改商店状态的唯一方法是显式地提交突变。这样可以确保每个状态更改都留下可跟踪的记录，并启用有助于我们更好地了解应用程序的工具

好了，说了一些概念，下面直接上手撸了
yarn add vuex
然后在项目的文件中创建一个store文件夹，（至于为啥叫store，我个人认为可能是模仿官网习惯了，），在store的文件夹中创建一个index.js，在这个文件中引入vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store =new Vuex.Store({
	state:{
		count:1
	}
})
export default store

然后在main.js中引入store
import store from ‘./store’
在跟主键上注册
el: ‘#app’,
router,
store,
components: { App },
template: ‘’
在页面中使用vuex中的数据
{{this.$store.state.count}}

看到这个效果就可以了

说明你的第一步完成了

第二步是mutations
如果在使用的过程中，我们想要改变这个数值怎么办呢，在vuex中规定：如果想要改变state中的数据，只能使用mutations来显式改变，这也符合单项数据流的理念
在store的对象中新建一个mutations的对象

在每个对象的第一个参数是state，第二个参数可以是进行运算的数值
然后在页面中使用这些方法必须要使用commit来进行调用


到这一步，就算第二部完成了，对于一般的练手项目就可以了
下面说一下getter这个，它相当于computed计算属性，只有当他依赖的数据发生变化，它才会重新计算



到这一步，第三步也就完成了
下面就是action这一块，因为vuex并不建议我直接使用mutation来更新数据，而是建议我们使用dispatch（“mutations方法名”）来更新数据


到这一步，就算完成了vuex的基本操作，在去看看官方文档，就清晰明了了许多