VUE-X 辅助函数用法及分模块使用vuex

1VUE-X辅助函数用法：

Appvue内容：

<template>

  <div id="app">

    <h1>{{num}}</h1>

    <button @click="addNumber">增加</button> |

    <button @click="delNumber">减少</button> |

    <button @click="ajaxfn">异步加</button> |

  </div>

</template>

<script>

/ 导出vuex中的 mapState 方法/

import { mapState,mapGetters, mapMutations,mapActions} from 'vuex'

export default {

  name:"App",

  computed:{

    /  /

    mapState(['num']),

    mapGetters(['getDaZhuan','getBenKe'])

  },

  methods: {

    / 利用mapMutations方法使用拓展运算符把Mutations的方法解构在methods中 /

    / 在this中也可以找到对应解构出来的方法 /

    / mapMutations(['ADDNUM','DELNUM']), /

    / 如果Mutations中的方法和methods中同名了,可以采用对象形式修改 /

    mapMutations({

      addfn:'ADDNUM',

      delfn:'DELNUM'

    }),

    / 类似于下面 /

    / ADDNUM:function(){}

    DELNUM:function(){} /

    addNumber(){

      / this$storecommit('ADDNUM',2) /

      / thisADDNUM(2) /

      thisaddfn(2)

    },

    delNumber(){

      / this$storecommit('DELNUM',2) /

      / thisDELNUM(2) /

      thisdelfn(2)

    },

    ADDNUM(){

      consolelog(2);

    },

    / 利用mapActions方法使用拓展运算符把Actions的方法解构在methods中 /

    / 在this中也可以找到对应解构出来的方法 /

    / mapActions(['addajax']), /

    / 如果Actions中的方法和methods中同名了,可以采用对象形式修改 /

    mapActions({

    addajax2:'addajax'

    }),

    ajaxfn(){

     thisaddajax(5)

    },

    addajax(){

     thisaddajax2(5)

    }

  },

}

</script>

<style>

</style>

store下indexjs内容：

/ import { set } from 'core-js/core/dict'; /

import Vue from 'vue'

import Vuex from 'vuex'

Vueuse(Vuex)

/ Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式 + 库。

它采用集中式存储管理应用的所有组件的状态，

并以相应的规则保证状态以一种可预测的方式发生变化。 /

/ 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,

   Vuex将会成为自然而然的选择 /

/ 导出一个Vuex实例化对象 /

export default new VuexStore({

  / state是用来存储组件中的数据的 /

  state: {

    msg: '我是组件共享的数据',

    num: 0,

    list: [{

        "title": "某xxxx去了学校1",

        "dec": "xxxxxxx学习了vue学习了java",

        "xueli": "大专"

      },

      {

        "title": "某xxxx去了学校2",

        "dec": "xxxxxxx学习了vue学习了javaScript",

        "xueli": "大专"

      },

      {

        "title": "某xxxx去了学校3",

        "dec": "xxxxxxx学习了vue学习了云计算",

        "xueli": "大专"

      },

      {

        "title": "某xxxx去了学校4",

        "dec": "xxxxxxx学习了vue学习了前端",

        "xueli": "本科"

      },

      {

        "title": "某xxxx去了学校5",

        "dec": "xxxxxxx学习了vue学习了后端",

        "xueli": "本科"

      },

      {

        "title": "某xxxx去了学校6",

        "dec": "xxxxxxx学习了vue学习了大数据",

        "xueli": "本科"

      }

    ]

  },

  / getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 /

  / 类似于计算属性 /

  getters: {

    / 计算大专学历的数据 /

    getDaZhuan: function (state) {

      return statelistfilter(r => rxueli == '大专')

    },

    / 计算本科学历的数据 /

    getBenKe: function (state) {

      return statelistfilter(r => rxueli == '本科')

    },

    / 说明也具有缓存功能 如果state中的数据得到了改变

        那么getters中的属性也会发生改变,如果state的值没有发生任何变化,那么getters

        中的属性的值就不会发生改变/

    getRandom:function(state){

       return statenum +'--'+ Mathrandom()

    }

  },

  / 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) /

  mutations: {

    / 在mutations里面写异步就会造成数据混乱的问题 /

    / mutations 的方法最好大写,为了和actions方法做区分 /

    / mutations 通过payload来获取 /

    ADDNUM: function (state, payload) {

      consolelog('ADDNUM', state);

      / 模拟后台获取数组的异步场景 /

      / setTimeout(()=>{

        statenum+=payload

      },500) /

      / statenum++ /

      statenum += payload

    },

    DELNUM: function (state, payload) {

      consolelog('DELDNUM', state);

      / statenum-- /

      statenum -= payload

    },

  },

  / actions是用来调后台接口的并commit提交一个mutations /

  actions: {

    / actions里面的方法小写为了区分mutations里面的方法 /

    / 异步请求要放 actions 里面去写 不要放组件写/

    addajax: function ({

      commit

    }, data) {

      setTimeout(() => {

        / 使用解构出来的commit方法来提交一个mutations方法ADDNUM来修改state中的值 /

        commit('ADDNUM', data)

      }, 500)

    },

    delajax: function ({

      commit

    }, data) {

      setTimeout(() => {

        / 使用解构出来的commit方法来提交一个mutations方法ADDNUM来修改state中的值 /

        commit('DELNUM', data)

      }, 500)

    },

  },

  / 可以使用modules把vuex分模块 /

  modules: {}

})

2分模块使用vuex：

appvue内容：

<template>

  <div id="app">

    <h1>{{$storestatemodAmodaStr}}</h1>

    <h1>{{$storestatemodBmodbStr}}</h1>

    <h1>{{$storegetters['modA/strGetter']}}</h1>

    <button @click="changeStr">修改modaStr的值</button>

    <button @click="waitchange">异步修改modaStr的值</button>

  </div>

</template>

<script>

export default {

  name:"App",

  created(){

    consolelog(this);

  },

  methods:{

    changeStr(){

      this$storecommit('modA/CHANGESTR','坚持学VUE啊')

    },

    waitchange(){

      this$storedispatch('modA/waitfnStr','坚持学前端啊')

    }

  }

  }

</script>

<style>

</style>

store新建modules文件创建ModAjs文件：

/ 模块的局部状态 /

/ 箭头函数如果想返回对象需要使用()包一下不能直接返回{} /

const state = ()=>({

    modaStr:'我是模块A的数据'

  })

  / getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 /

  / 类似于计算属性 /

  const getters= {

    strGetter:function(state){

        consolelog(state);

      return statemodaStr + 'getter'

    }

  }

  / 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) /

  const mutations= {

   CHANGESTR(state,payload){

    statemodaStr = payload

   }

  }

  / actions是用来调后台接口的并commit提交一个mutations /

  const  actions= {

    waitfnStr({commit},data){

        setTimeout(()=>{

            commit('CHANGESTR',data)

        },1000)

    }

  }

  / 可以使用modules把vuex分模块 /

  const modules={

  }

  export default {

      / 保证模块之间的数据独立运行,不互相影响 /

      namespaced:true,

      state,

      getters,

      mutations,

      actions,

      modules

  }

store新建modules文件创建ModBjs文件：

const state = ()=>({

    modbStr:'我是模块B的数据'

  })

/ getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 /

/ 类似于计算属性 /

const getters= {

}

/ 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) /

const mutations= {

}

/ actions是用来调后台接口的并commit提交一个mutations /

const  actions= {

}

/ 可以使用modules把vuex分模块 /

const modules={

}

export default {

    / 保证模块之间的数据独立运行,不互相影响 /

    namespaced:true,

    state,

    getters,

    mutations,

    actions,

    modules

}

store下indexjs文件：

/ import { set } from 'core-js/core/dict'; /

import Vue from 'vue'

import Vuex from 'vuex'

/ 先把各个模块导入进来 /

import modA from '@/store/modules/ModAjs'

import modB from '@/store/modules/ModBjs'

Vueuse(Vuex)

/ Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式 + 库。

它采用集中式存储管理应用的所有组件的状态，

并以相应的规则保证状态以一种可预测的方式发生变化。 /

/ 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,

   Vuex将会成为自然而然的选择 /

/ 导出一个Vuex实例化对象 /

export default new VuexStore({

  / state是用来存储组件中的数据的 /

  state: {

  },

  / getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 /

  / 类似于计算属性 /

  getters: {

  },

  / 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) /

  mutations: {

  },

  / actions是用来调后台接口的并commit提交一个mutations /

  actions: {

  },

  / 可以使用modules把vuex分模块 /

  / 分模块实现数据集中管理 /

  / 在 modules 中把模块名注释一下/

  modules: {

   modA:modA,

   modB:modB

  }

})

vue中的异步问题困扰了好久，终于解决了，mark一下给需要的朋友。

项目开始使用vuex来解决组件之间变量传值的问题。但是用着用着出现了一个问题，子组件中用到mapboxMap属性，而mapboxMap属性值需要等待父组件初始化函数执行完之后才会有，这就存在一个异步的问题，页面已初始化加载的时候mapboxMap是为undefined，解决方法为在子组件中监听mapboxMap的值,具体方法如下：
父组件中：

子组件中

vuex和window对象很相似，因为是SPA，所以vuex可以做状态管理。但是vuex当页面刷新的时候会被重置为其初始值，或者说你用vue做多页面，这时候你的状态是不会被保存的。

localstorage是h5本地存储的一种方式，localStorage保存的数据，一般情况下是永久保存的，也就是说只要采用localstorage保存信息，数据便一直存储在用户的客户端中。

即使用户关闭当前web浏览器后重新启动，数据让然存在。知道用户或程序明确制定删除，数据的生命周期才会结束。这么讲你应该明白它们各自的使用场景了吧。

vuex是在每个组件上注入this store获取共享的状态，定义 *** 作state的方法。
首先使用vueuse(vuex)表明vuex是vue的插件，只能被vue使用——实例化Store并传入参入——Store注入到根组件上。以上三个步骤便可以使用vuex实现数据在组件中的共享了。

当使用到vueuse的时候，会调用Store文件中的install方法，并可以获取到当前组件的执行期上下文。通过全局混合的方式，在每个组件上嵌入this$store属性。

当Store类被实例化时，会执行constructor构造器并且传入option所需的参数，在对state、getters、mutations、actions编写。
1、实现state：理论上讲，直接把参数中的state赋值当前组件上即可，这样会引发一个问题，state的值无法动态改变。要使用state双向绑定可以直接使用vue实例中data方法，然后在通过get进行属性的截取。

2、实现getters：通过OjbectdefineProperty监听getters值里面的变化，当获取值的时候，会触发get方法，返回并执行参数getters里面的方法。

3、实现mutations：把参数mutations里面的方法重新用一个变量去接收，作用是防止变量的全局污染。定义commit函数，当被执行时，触发定义mutaion对象里面的方法。

4、实现actions：方法同上，有个地方需要作出微调，传递的参数是当前的执行期上下文。

项目案例

全局状态管理器，可以在项目的任何一个组件中去获取和修改，修改可以得到全局响应的变量

vue-cli2 项目中安装vuex，使用 npm install vuex --save

安装成功后，在src目录下新建一个store文件,里面创建一个js文件

在js文件中写入：

然后在mainjs文件中引入 store 并注册到 vue 实例中

vuex的文件配置到这里就完成了

现在再回去看store文件里的参数，这几个对象就是vuex五大核心：

State ：可全局访问的对象
Getter ：和vue的computed一样，用来实时监听state的值的变化（最新状态）
Mutation ：存放改变state值的方法（同步）
Action ：触发mutations里面的方法（异步）
module ：模块

State是存储在Vuex中的数据对象，和Vue实例中的data一样。只不过State是可以全局访问的。

定义stata对象，直接在 state 里面定义 key:val ，它可以定义任意数据类型

在页面中获取state的值 使用 this$storestate

在这里 state 通常都是挂载到 computed 计算属性上，这样当state的值发生改变的时候都能及时的响应。
当然也能用到 watch 去监听

State中的辅助函数 mapState
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

输出

Vuex 允许我们在 store 中定义 getter （可以认为是 store 的计算属性）。就像计算属性 computed 一样， getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值( state 中的属性)发生了改变才会被重新计算。

Getter的作用就是用来实时监听state的值的变化

定义Geters对象
使用 state 作为其第一个参数
可以使用其他 getter 函数作为第二个参数

在页面中使用getters，使用 this$storegetters

Getters中的辅助函数 mapGetters
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

输出

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

使用 state 作为第一个参数

使用 this$storecommit('方法名') 触发mutations中的方法

输出

而第二参数官方解释叫 提交载荷（Payload）
可以向 storecommit 传入额外的参数，即 mutation 的 载荷（payload）

简单来说就是可以在在第二参数里传入额外的参数

这里还是用name来做例子

输出

在 Vuex 中，mutation 必须是同步函数

Action 可以包含任意异步 *** 作，Action的作用就是异步触发Mutations

定义action对象
接收一个 context 参数和一个要变化的形参
context 与 store 实例具有相同的方法和属性，所以他可以执行 contextcommit("") ，也可以使用 contextstate 和 contextgetters 来获取 state 和 getters 。

使用 this$storedispatch("方法名") 方法执行Actions

输出

同样Action还支持载荷方法，传入第二形参

输出

其中 module 的作用是可以把 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

主要是为了解决由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

简单来说就是可以把vuex模块化

好好生活 -- 即将拥有八块腹肌的程序员

1父子组件的传值

        父传子通过props传递，子传父通过$emit

        还有兄弟传值公共的bus,夸组件传值vuex

传值的方式有很多种，这里就先介绍下简单的父子传值
父传子
通过在子组件上自定义属性，将data流入，子组件可以通过props来接受流入的值如图：
最后通过thisprogram的方式可以直接使用这个值
子传父

由于数据是单向流通的这里不能再通过props在子组件传值给父组件，需要通过$emit的方式去触发事件将子组件的值传递给父组件如图：

通过自定义方法在父组件methods中用于接收子组件传递的数据,子组件中通过this$emit("weekFn", resdataenable);语句，weekFn：在父组件中自定义的方法名，resdataenable传递给父组件的数据，weekFn（value）{value用于接收子组件传递过来的值}。
说到这其实这个也可以进一步简化，通过sync修饰符将自定义方法和自定义属性简化为,如图：
通过this$emit('update:program', resdataenable)语法可以直接修改data的值，为什么能修改呢 看下下面的图就知道了

    

sync其实就是一个语法糖，他将自定义方法这一步简化了，通过sync直接将赋值这一步合并。

关于公共bus，感觉功能并不是很实用，vuex可以完全替代这个这里就不详细讲解了，下一章就详细讲解vuex中的值传递。

---