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