码迷,mamicode.com
首页 > 其他好文 > 详细

Vuex--getters属性的使用

时间:2019-10-05 12:21:41      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:getters   exp   界面   count   动态   style   案例   vuex   fun   

//1.安装插件
Vue.use(Vuex)
//2.创建对象--并导出store
export default new Vuex.Store({
  modules: {
    app,
    user,
    i18n,
    permission
  },
  //单一状态数
  state: {

  },
  //方法
  mutations: {

  },
  actions: {

  },
  //计算属性--加工state中的数据,并返回--其他页面多次引用可用
  getters: {
    //计算平方案例
    // powerCounter(state){
    //   return state.counter * state.counter
    // }
    //其他页面引用{{$store.getters.powerCounter}}
  }
})
过滤器函数使用户的案例
 //单一状态数
  state: {
    //是一个数组对象
    students: [
      {id: 10, name: ‘ha‘, age: 18},
      {id: 10, name: ‘ha‘, age: 18},
      {id: 10, name: ‘ha‘, age: 18},
    ]
  },
计算属性:
//简写 return this.$store.students.filters(s => s.age >= 20)
computed: {
    more20stu() {
      //filters过滤器函数,每次拿一个判断年龄是否大于20
      return this.$store.students.filters(s =>{
//这返回的是布尔类型,true则返回s的这一条数据
        return s.age >= 20
      })
    }
  }
 
此案例可在getters中引用--不用单页面写,
  getters: {
    more20stu(state) {
    return state.students.filters(s => s.age >= 20)
   }
}

其他页面引用
{$store.getters.more20stu}}
 
 
//数据是一个动态的数值--通过交互获取参数--返回的是一个函数进行接收这个参数
    //界面传参 {{$store.getters.moreAgestu(18)}}
    moreAgestu(state) {
      retuen function (age) {
        return state.students.filters(s => s.age >age)
      }
    }
//简写 moreAgestu(state) {
 returen age => {
        return state.students.filters(s => s.age > age)
      }
}

Vuex--getters属性的使用

标签:getters   exp   界面   count   动态   style   案例   vuex   fun   

原文地址:https://www.cnblogs.com/fdxjava/p/11624124.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!