vuex
vuex状态管理工具
1.什么是Vuex：
Vuex是一个专为Vue.js应用程序开发的状态管理模式。
2.使用Vuex的原因：
当我们遇到多个组件共享状态时，多层组件的传值非常繁琐，不利于维护，因此我们把组件的共享状态抽取出来，以一个单例模式管理，在这种模式下，不管在哪个组件都可以获取状态或触发行为
3.什么情况下使用：
<1>虽然Vuex可以帮助我们管理共享状态，但是也附带了更多的概念和框架，增加了学习成本，所以决定是否要使用Vuex要对短期和长期效益进行权衡。
<2>如果应用够简单，最好不要使用Vuex；如果需要构建一个中大型单页应用，可以考虑使用Vuex去更好的再组件外部管理状态。
4.如何使用Vuex：
<1>每一个Vuex应用的核心就是store（仓库），它包含着应用中大部分的状态（state）,store是内存机制，而不是缓存机制，当前页面一旦刷新挥着通过路由跳转亦或是关闭，都会导致store初始化。
<2>Vuex的核心概念分别是：
（1）State: 存放基本数据 ----辅助函数mapState: 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。
（2）getters：是从store中的state派生出来的状态，专门来计算state中的数据，相当于state中数据的计算属性 ---辅助函数mapGetters辅助函数: mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，与state类似
（3）actions: 是专门操作异步请求的数据和业务逻辑的地方，它不能直接变更state中的状态，而是通过commit来调用mutations里的方法来改变state里的数据。 ---辅助函数mapActions 将组建的methods映射为store.dispath调用
（4）mutations：提交mutions是更改Vuex中的状态的唯一方法。mutations必须是同步的，如果要异步需要使用actions。每一个mutations都有一个字符串作为第一个参数，提交载荷作为第二个参数。 ---辅助函数mapMutations 将组建中的methods映射为store.commit调用。
（5）Moules：使用单一状态树，导致应用的所有状态几种到一个很大的对象，但是，当应用变得很大时，store对象会变得臃肿不堪，为了解决以上问题，Vuex允许我们将store分割到模块（modules）。每个模块拥有自己的state、mutations、avtions、grtters。
<3>若要改变state里的数据，则通过actions使用comiit来调用mutations里的方法进而改变state里的数据。
1.安装vuex: npm i vuex --save
也是单向数据流的，
（项目）用到vuex 在项目中管理数据 管理的哪些数据
建立仓库 new Vuex.Store
存数据 {
state:{
n:555
}
}
取数据 this.$store.state.变量
改数据 mutations(同步操作)
修改数据的方法发到mutations里面(state,参数)
修改数据的方法有两个参数，第一个state,第二个自定义（增或减）。
调用mutations里面的方法
this.$
store.commit("mutations里面的方法名",参数)
getters store中的计算属性
actions 放异步操作的 this.$store.dispatch("actions方法名")
vuex 状态管理工具 （状态即数据）
中英仓库，可供任何组件使用，存取
state 状态 数据
dispatch 派遣分发
1.建立一个仓库
2.把数据存到仓库里面去
3.在仓库里取出数据
4.安装vuex: npm i vuex --save
也是单向数据流的，
commit 指派、委托、遵守
mutations 操作变化
组件从仓库中拿数据，同时组件可以提交一个异步请求，发生一个异步动作，异步动作发生后，通过同步的修改，将数据修改掉，之后数据传给组件
Vuex store 基本使用
1.项目中安装 vuex : npm install vuex --save
2.src下新建 store 文件夹，新建index.js，相当于一个数据仓库
3.main.js中操作
在mian.js中注册了 store 组件，在全局就可以直接调用其方法
2.App中接收，且渲染（组件中调取数据）
在组件中调用其数据
第一种方式：在模板中使用{{ $store.state.n }}
第二种方式：在export default {
使用计算属性，实时监控
computed:{
n( ){
return this.$store.state.n
}
}
}
使用：在插件中{{n}}可以直接取到值
3.即可实现store 中变量值改变，页面中的数据也同样改变
同步自增
1.index.js
2.App.html
getters store中的计算属性
actions 放异步操作的 this.$store.dispatch("actions方法名")
三目 判断
异步定时自增
vuex状态管理工具
1.什么是Vuex：
Vuex是一个专为Vue.js应用程序开发的状态管理模式。
2.使用Vuex的原因：
当我们遇到多个组件共享状态时，多层组件的传值非常繁琐，不利于维护，因此我们把组件的共享状态抽取出来，以一个单例模式管理，在这种模式下，不管在哪个组件都可以获取状态或触发行为
3.什么情况下使用：
<1>虽然Vuex可以帮助我们管理共享状态，但是也附带了更多的概念和框架，增加了学习成本，所以决定是否要使用Vuex要对短期和长期效益进行权衡。
<2>如果应用够简单，最好不要使用Vuex；如果需要构建一个中大型单页应用，可以考虑使用Vuex去更好的再组件外部管理状态。
4.如何使用Vuex：
<1>每一个Vuex应用的核心就是store（仓库），它包含着应用中大部分的状态（state）,store是内存机制，而不是缓存机制，当前页面一旦刷新挥着通过路由跳转亦或是关闭，都会导致store初始化。
<2>Vuex的核心概念分别是：
（1）State: 存放基本数据 ----辅助函数mapState: 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。
（2）getters：是从store中的state派生出来的状态，专门来计算state中的数据，相当于state中数据的计算属性 ---辅助函数mapGetters辅助函数: mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，与state类似
（3）actions: 是专门操作异步请求的数据和业务逻辑的地方，它不能直接变更state中的状态，而是通过commit来调用mutations里的方法来改变state里的数据。 ---辅助函数mapActions 将组建的methods映射为store.dispath调用
（4）mutations：提交mutions是更改Vuex中的状态的唯一方法。mutations必须是同步的，如果要异步需要使用actions。每一个mutations都有一个字符串作为第一个参数，提交载荷作为第二个参数。 ---辅助函数mapMutations 将组建中的methods映射为store.commit调用。
（5）Moules：使用单一状态树，导致应用的所有状态几种到一个很大的对象，但是，当应用变得很大时，store对象会变得臃肿不堪，为了解决以上问题，Vuex允许我们将store分割到模块（modules）。每个模块拥有自己的state、mutations、avtions、grtters。
<3>若要改变state里的数据，则通过actions使用comiit来调用mutations里的方法进而改变state里的数据。
1.安装vuex: npm i vuex --save
也是单向数据流的，
（项目）用到vuex 在项目中管理数据 管理的哪些数据
建立仓库 new Vuex.Store
存数据 {
state:{
n:555
}
}
取数据 this.$store.state.变量
改数据 mutations(同步操作)
修改数据的方法发到mutations里面(state,参数)
修改数据的方法有两个参数，第一个state,第二个自定义（增或减）。
调用mutations里面的方法
this.$
store.commit("mutations里面的方法名",参数)
getters store中的计算属性
actions 放异步操作的 this.$store.dispatch("actions方法名")
vuex 状态管理工具 （状态即数据）
中英仓库，可供任何组件使用，存取
state 状态 数据
dispatch 派遣分发
1.建立一个仓库
2.把数据存到仓库里面去
3.在仓库里取出数据
4.安装vuex: npm i vuex --save
也是单向数据流的，
commit 指派、委托、遵守
mutations 操作变化
组件从仓库中拿数据，同时组件可以提交一个异步请求，发生一个异步动作，异步动作发生后，通过同步的修改，将数据修改掉，之后数据传给组件
Vuex store 基本使用
1.项目中安装 vuex : npm install vuex --save
2.src下新建 store 文件夹，新建index.js，相当于一个数据仓库
3.main.js中操作
在mian.js中注册了 store 组件，在全局就可以直接调用其方法
2.App中接收，且渲染（组件中调取数据）
在组件中调用其数据
第一种方式：在模板中使用{{ $store.state.n }}
第二种方式：在export default {
使用计算属性，实时监控
computed:{
n( ){
return this.$store.state.n
}
}
}
使用：在插件中{{n}}可以直接取到值
3.即可实现store 中变量值改变，页面中的数据也同样改变
同步自增
1.index.js
2.App.html
getters store中的计算属性
actions 放异步操作的 this.$store.dispatch("actions方法名")
三目 判断
异步定时自增