如何调用vuex中的方法

‘壹’ vuex的几种调用方法

就是子组件给自己加的一把锁，不让父组件轻易的访问进来

第一种： 直接调用

第二种： 辅助函数

第三种： 仅做了解

第四种：辅助函数的 升级版

‘贰’ vuex 数据管理,组件A如何调用组件B的方法

应该兄戚把方法羡脊陵发在vuex中的mutations中 在任意组野带件都可以使用this.$store.commit(mutation,参入的参数)进行访问

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

1.VUE-X辅助函数用法：

App.vue内容：

<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.$store.commit('ADDNUM',2) */

      /* this.ADDNUM(2) */

      this.addfn(2)

    },

    delNumber(){

      /* this.$store.commit('DELNUM',2) */

      /* this.DELNUM(2) */

      this.delfn(2)

    },

    ADDNUM(){

      console.log(2);

    },

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

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

    /* ...mapActions(['addajax']), */

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

    ...mapActions({

    addajax2:'addajax'

    }),

    ajaxfn(){

     this.addajax(5)

    },

    addajax(){

     this.addajax2(5)

    }

  },

}

</script>

<style>

</style>

store下index.js内容：

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

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

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

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

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

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

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

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

export default new Vuex.Store({

  /* 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 state.list.filter(r => r.xueli == '大专')

    },

    /* 计算本科学历的数据 */

    getBenKe: function (state) {

      return state.list.filter(r => r.xueli == '本科')

    },

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

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

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

    getRandom:function(state){

       return state.num +'--'+ Math.random()

    }

  },

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

  mutations: {

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

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

    /* mutations 通过payload来获取 */

    ADDNUM: function (state, payload) {

      console.log('ADDNUM', state);

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

      /* setTimeout(()=>{

        state.num+=payload

      },500) */

      /* state.num++ */

      state.num += payload

    },

    DELNUM: function (state, payload) {

      console.log('DELDNUM', state);

      /* state.num-- */

      state.num -= 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)

    },

  },

  /* 可以使用moles把vuex分模块 */

  moles: {}

})

2.分模块使用vuex：

app.vue内容：

<template>

  <div id="app">

    <h1>{{$store.state.modA.modaStr}}</h1>

    <h1>{{$store.state.modB.modbStr}}</h1>

    <h1>{{$store.getters['modA/strGetter']}}</h1>

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

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

  </div>

</template>

<script>

export default {

  name:"App",

  created(){

    console.log(this);

  },

  methods:{

    changeStr(){

      this.$store.commit('modA/CHANGESTR','坚持学VUE啊')

    },

    waitchange(){

      this.$store.dispatch('modA/waitfnStr','坚持学前端啊')

    }

  }

  }

</script>

<style>

</style>

store新建moles文件创建ModA.js文件：

/* 模块的局部状态 */

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

const state = ()=>({

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

  })

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

  /* 类似于计算属性 */

  const getters= {

    strGetter:function(state){

        console.log(state);

      return state.modaStr + 'getter'

    }

  }

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

  const mutations= {

   CHANGESTR(state,payload){

    state.modaStr = payload

   }

  }

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

  const  actions= {

    waitfnStr({commit},data){

        setTimeout(()=>{

            commit('CHANGESTR',data)

        },1000)

    }

  }

  /* 可以使用moles把vuex分模块 */

  const moles={

  }

  export default {

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

      namespaced:true,

      state,

      getters,

      mutations,

      actions,

      moles

  }

store新建moles文件创建ModB.js文件：

const state = ()=>({

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

  })

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

/* 类似于计算属性 */

const getters= {

}

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

const mutations= {

}

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

const  actions= {

}

/* 可以使用moles把vuex分模块 */

const moles={

}

export default {

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

    namespaced:true,

    state,

    getters,

    mutations,

    actions,

    moles

}

store下index.js文件：

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

import Vue from 'vue'

import Vuex from 'vuex'

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

import modA from '@/store/moles/ModA.js'

import modB from '@/store/moles/ModB.js'

Vue.use(Vuex)

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

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

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

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

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

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

export default new Vuex.Store({

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

  state: {

  },

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

  /* 类似于计算属性 */

  getters: {

  },

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

  mutations: {

  },

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

  actions: {

  },

  /* 可以使用moles把vuex分模块 */

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

  /* 在 moles 中把模块名注释一下*/

  moles: {

   modA:modA,

   modB:modB

  }

})

‘肆’ Vuex简单使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
如果一份数据需要在多个组件中使用，组件间传值又比较复杂，就可以使用vuex托管数据。

state选项： 定义状态（状态就是数据）。
mutations选项： 定义修改状态的方法（注意：这里面只能定义同步方法）。

$store： 返回的是当前项目中的全局状态对象。
commit()方法： 用于执行指定的mutations里面的方法。

在组件中，直接通过$store.state就可以获取到全局状态对象管理的状态数据，直接渲染到页面。

state选项： 定义状态（状态就是数据）。

通过 $store.state.数据名 使用。

getters选项： 定义计算属性。方法的参数是状态对象。

通过 $store.getters.属性名 使用计算属性。

mutations选项： 定义修改状态的方法（注意：这里的方法一般都是同步方法）。方法的第一个参数是状态对象，第二个参数是新值。

通过 commit() 方法，调用mutations里面的方法。

actions选项： 定义操作状态的方法（这里的方法可以定义异步方法）。
注意： actions里的方法最好不要直接操作state状态，而是通过调用mutations里面的方法去修改状态。所以，actions直接操作的是mutations。

通过 dispatch() 方法，调用actions里面定义的方法。

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（mole）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

namespaced属性： 默认情况下，action、mutation 和 getter 是注册在全局命名空间的。通过设置namespaced属性为true，将action、mutation 和 getter全部注册到私有命名空间中。

要从私有模块中获取数据，方式是： $store.state.模块名称.模块的数据 。

要从私有模块中获取计算属性，方式是： $store.getters['模块名/计算属性'] 。

调用私有模块里面的mutations定义的方法，方式是： $store.commit('模块名/方法名',新值) 。

调用私有模块里面的actions定义的方法，方式是： $store.dispatch('模块名/方法名',新值) 。

直接在模板中使用全局状态管理数据，表达式会写的很长。所以可以使用计算属性。

通过映射函数mapState、mapGetters、mapActions、mapMutations，可以将vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，便于操作vuex.store。

如果vuex里面state的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapState 映射函数，自动生成页面中的计算属性。
如果vuex里面getters的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapGetters 映射函数，自动生成页面中的计算属性。
注意： 如果要映射模块里面的state/getters，函数的第一个参数设置为模块的名称。

如果定义的方法名跟全局管理对象中mutations里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapMutations 映射函数生成方法。
如果定义的方法名跟全局管理对象中actions里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapActions 映射函数生成方法。
注意： 如果要映射私有模块中mutations/actions里面的方法，函数的第一个参数设置为模块的名称。

‘伍’ Vuex的使用及组件通信方式

Vuex是通过全局注入store对象，来实现组件间的状态共享。在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可。

Vue组件简单常用的通信方式有以下几种：
1、父子通信：父向子传值，兆配通过props；子向父传值通过配猜举events ($emit)；父调用子方法通过ref；provide / inject。
2、兄弟通信：bus
3、跨级嵌套通信：bus；provide / inject等。

Vuex有培碧以下几个部分构成：
1）state
state是存储的单一状态，是存储的基本数据。

2）Getters
getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3）Mutations
mutations提交更改数据，使用store.commit方法更改state存储的状态。（mutations同步函数）

4）Actions
actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）

5）Mole
Mole是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

const moleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
moles: {
a: moleA,
b: moleB
}
})

store.state.a // -> moleA 的状态
store.state.b // -> moleB 的状态

触发异步请求操作：
this.$store.dispatch('reqHomeData')

actions中：
async reqHomeData({ commit }) {
const result = await server.getHomeData();
commit(GET_HOME_DATA, { homeList: result })
},

mutations中：
[GET_HOME_DATA](state, { homeList }) {
state.homeList = homeList
},

‘陆’ vuex 调用方法总结

1.在vue组件里面引用：埋贺

import {mapState, mapGetters, mapMutations, mapActions}

mapState:   computed属性里面 声明

mapGetters:  computed属性里面 声明

mapMutations: methods属性里面 声明

mapActions: methods属性里面 声明

2.在js直接调用state：

import store from '@/store';

const { crmToken, userInfo } = store.state;---------调用灶激state

store.dispatch('setLogout'); --------调用actions方法

store.commit('SET_ERR_MSG', errMsg);-----调用方法

3.vuex 引入element-ui 并使用

import{ Message 隐液袜} from 'element-ui';

Message.error({

    message: s.errMsg,

    onClose: () => {

        s.showErrorMsg = false;

    },

});

‘柒’ vuex的五个属性及使用方法

vuex的五个属性及使用方法如下：

基本属性：

1. state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

Vuex的用法：

新建vue项目testApp ==》 在testApp中建store文件 ==》 store文件下又有moles文件夹和getter.js 和 index.js ==》 store文件下建user.js

在项目的main.js中引入 import store from './store'

在store文件下的index.js中引入