Vuex--getters属性的使用

Posted 2022-12-24 fdxjava

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