axios请求数据放入vuex笔记

npm install vuex --save 下载 主要可以分为 state getter mutation  action module五大块 我个人的理解是 state (初始化数据)、getter (输出给外界数据) 、mutation (定义的方法)、action (输出给外界方法)、module（每一个js 文件都可以包含state getter mutation  action四项，统一进行管理）

新建一个store.js 文件

在main.js 文件中引入

完成后 通过this.$store.state.number就可以获取到number:0的值了

但官方还给了getters是来监听state初始化的值

通过this.$store.getters.newNumber 也可以获取number:0的值

写在弄一个点击事件，使得state的值进行累加通过 mutations

点击事件通过 this.$store.commit("aaNumber") 可以将数据进行累加

或可以使用mapMutations 如图：

actions是用来提供异步请求

通过this.$store.dispatch("aaNumberChange");

modules ：在真正用的时候不会只有一个store 基本都会将方法分开，这里在做一个递减器主要为了分开两个文件，新建一个add.js 文件与reduce.js文件。把之前store.js中state、mutations、actions、getters放到add.js 中如图   reduce.js文件一样只是将++改成--

将store.js 改成

在aap.vue文件中 发送vuex请求 以及用mapState来获取值如图：

通过mapGetters来取值，取的是getter的方式如图

mapActions发送vuex请求方式 代替aa(){ this.$store.dispatch("aaa/aaNumberChange")} 如图：

以下为如何通过aixos存入vuex方式

npm install vue-axios --save  下载    功能：axios请求josn 得到数据存储vuex 渲染页面  新建一个text.json文件用于aixos.get请求数据保存到vuex中，且写入数据

在main.js 中引入

新建一个storeSum.js  在分别建立两个dataA与dataB.js 文件以上面一样主要用于modules

aa为请求数据后将值替换掉  cc为自带参数替换