浅谈vuex中的actions,getter,mutations,state的使用

日期:2021-08-22 16:19:34    浏览:145

state 数据

getter 计算属性

mutations 方法

actions 异步

modules 模块

state的使用

state: {
        num: 10,
        dnum: 5,
        mnum: 0
    },

在视图中调用

  <h3>在About组件中应用vuex</h3>
  {{ $store.state.num }}
  <h3>在About组件中应用vuex</h3>
  {{ $store.state.dnum }}

getters的使用

这里的第一个参数state是state里面的值

getters: {
        //计算属性
        //不带参数的写法
        mepow(state) {
            return state.num * state.num;
        },
        //带参数写法
        fpow(state) {
            return function (bb) {
                return state.dnum * state.dnum * bb;
            }
        },
        //引用上一个方法
        mpow(state, getters) {
            return getters.fpow(9);
        }
    },

视图中

  <h3>vuex中的计算属性</h3>
  {{ $store.getters.mepow }}
  <h3>vuex中的计算属性带参数</h3>
  {{ $store.getters.fpow(2) }}

mutations 的使用

这里的count是自定义参数

mutations: {
        //方法
        sub1(state) {
            state.dnum--
        },
        add1(state) {
            state.dnum++
        },
        sub2(state, count) {
            state.dnum -= count
        },
        add2(state, count) {
            state.dnum += count
        },
        sum(state) {
            state.mnum++
        }
    },

视图调用

    sub1(){
      this.$store.commit('sub1')
    },
    add1(){
      this.$store.commit('add1')
    },
    sub2(){
      this.$store.commit('sub2',this.count)
    },
    add2(){
      this.$store.commit('add2',this.count)
    }

但我们的应用比较复杂的时候,我们可以使用module来处理

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

state的调用

这里定义一个user module

const user={
    state:{
        name:'xiaozhang'
    },
    mutations:{
        setname(state,payload){
            state.name=payload.name
        }
    }
}

$store.state.user user为刚才定义的名称,后面接属性名

  {{ $store.state.user.name }}

getters  和全局的getters调用方法是相同的

如果在子user里面定义了和全局相同的方法,那么它就会两个都调用

视图中显示

相同函数名,最终获取的结果为全局的

  {{ $store.getters.mepow }}

 

使用命名空间

namespaced: true,

getters 调用 

 getters['account/isAdmin']

actions 调用

dispatch('account/login')

mutations调用

commit('account/login')

Tags: vue

世事无常

要有遥不可及的梦想,也要有脚踏实地的本事