首页 > 其他 > 详细

Vuex--其他属性的使用

时间:2019-10-05 11:15:12      阅读:89      评论:0      收藏:0      [点我收藏+]
//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)
      }
    }

Vuex--其他属性的使用

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!