vuex如何来使用

vuex:
是vue 中的全局状态管理插件,通过一颗全局状态树,管理整个应用的数据

vuex如何来使用
单向数据流:
view派发一个 Actions 改变State State改变之后 view 重新渲染

vuex分为五大核心模板:

getters : 类似于于计算属性,可以针对原始的state 数据做重新计算
**state ????*存储的数据信息
**actions:**做异步操作的 我们可以在view 中dispath 一个 action 来改变数据
mutations : 所有的数据改变都在这里进行
**models :**分模块,在项目开发的时候,我们需要把代码做一部分拆分

如何使用 vuex
npm i vuex 安装
…js
import Vuex from ‘vuex’
Vue.use(Vuex);
注意: 一定要写 Vue.use(Vuex) 这句话

vuex如何来使用
store state count 可以在所有组件中使用 例如 Home 和 App中都可以使用

vuex如何来使用
我们在js中获取vue 实例对象的时候要加this

第一种场景:同步的改变数据:
###通过commit 提交一个mutation 来改变state中的数据
vuex如何来使用

vuex如何来使用

vuex如何来使用

第二种场景:异步的改变数据:

vuex如何来使用

vuex如何来使用
vuex如何来使用

方法和数据映射:
####mapState 可以把state 中的数据映射到计算属性
####mapMutations 可以把mutation中的属性名映射到methods中
####mapMutations 可以把action 中的属性名映射到 methods

vuex如何来使用

vuex如何来使用