vuex简单用法及mapState,mapGetters的使用

167 阅读1分钟

actions,mutations

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    msg:'我是组件共享的数据',
    num:0
  },
  /* getters是用来计算组件中的数据,可以对数据进行二次加工

  类似于computed功能 */

  getters: {

  },

  /* 在mutations中修改state中的值

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

  mutations: {

    ADDNUM(state,payload){

      state.num+=payload

    },

    DEL(state,payload){

      state.num-=payload

    }

  },

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

  },
  modules: {

  }

})

 

在mutations里面写的方法有两个值 state表示自身的共享参数,payload表示从组件中接收过来的参数*

this.$store.dispatch('addajax',this.shuzi)表示使用actions中的方法

Actions中使用的方法需要({commit},payload) 解构commit,payload表示app传来的参数,方法中直接使用commit('ADDNUM',payload)

mapState,mapGetters

使用 引入

import {mapState,mapGetters} from 'vuex'
computed:{
...mapState(['list']),
...mapGetters(['One','Three']),

}

使用之后 在store中index.js的state以及getters中定义的属性都可以使用this.xxx调用