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