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