Vuex--getters属性的使用

//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)

      }

}