<div id="app">
<Todo></Todo>
<Todo1></Todo1>
<Todo2></Todo2>
</div>
<script>
/*const store = new Vuex.Store({
state: {//用一个对象就包含了全部的应用层级状态。(唯一数据源)
todos: [
{ id: 1, text: '哈哈哈', done: true },
{ id: 2, text: '嘿嘿嘿', done: false }
]
},
})
//由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性
const Todo = {
template: `<div>列表一<ul><li v-for="todo in todos">{{todo.text}}</li></ul></div>`,
computed: {
todos () {
return this.$store.state.todos;
//或者做一些其他处理
}
}
}
const Todo1 = {
template: `<div>列表二<ul><li v-for="todo in todos">{{todo.text}}</li></ul></div>`,
computed: {
todos () {
return this.$store.state.todos;
//或者做一些其他处理
}
}
}
const Todo2 = {
template: `<div>列表三<ul><li v-for="todo in todos">{{todo.text}}</li></ul></div>`,
computed: {
todos () {
return this.$store.state.todos;
//或者做一些其他处理
}
}
}
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
store,
components: {Todo,Todo1,Todo2},
})*/
/*
*
* 以上的每个组件中都需要拿取store中的值，每个组件中都需要配置相同的计算属性，或者抽取一个共享函数引用他，都不是理想的方法
* 所以getter诞生了
* Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
*
* */
/*const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
todos: state => {
return state.todos;
}
}
})*/
const store = new Vuex.Store({
state: {//用一个对象就包含了全部的应用层级状态。(唯一数据源)
todos: [
{ id: 1, text: '哈哈哈', done: true },
{ id: 2, text: '嘿嘿嘿', done: false },
{ id: 3, text: '呵呵呵', done: true }
]
},
getters:{//就是store中的计算属性，避免组建中重复编写的内容；减少冗余代码
todosList: state => {//通用的方法 在所有的组件中都可以通过计算属性中 this.$store.getters.todosList 获取的值
return state.todos.filter(todo => todo.done)
//或者做一些其他数据处理
}
}
})
//通过属性访问
console.log(store.getters.todosList)
//由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性
const Todo = {
template: `<div>{{doneTodosCount}}</div>`,
computed: {
doneTodosCount(){
return this.$store.getters.todosList.length;
}
}
}
const Todo1 = {
template: `<div>列表二<ul><li v-for="todo in todosList">{{todo.text}}</li></ul></div>`,
computed: {
todosList () {
return this.$store.getters.todosList
}
}
}
const Todo2 = {
template: `<div>列表三<ul><li v-for="todo in todosList">{{todo.text}}</li></ul></div>`,
computed: {
todosList () {
return this.$store.state.todos
}
}
}
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
store,
components: {Todo,Todo1,Todo2},
})
/*
*
* 通过方法访问
* 通过让 getter 返回一个函数，来实现给 getter 传参。
* 在你对 store 里的数组进行查询时非常有用。
*
* */
/*getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}*/
//组件中获取值
/*methods:{
find(n){
store.getters.getTodoById(n) // -> { id: 2, text: '...', done: false }
}
}
computed:{
fil(){
store.getters.getTodoById(2)
}
}*/
//mapGetters 辅助函数
console.log(Vuex.mapGetters);
/*模块化开发用import
import { mapGetters } from 'vuex'*/
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中(此处接收一个getter的数组，也可以接收一个对象，下边的例子)
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
//如果你想将一个 getter 属性另取一个名字，使用对象形式：(就是setter的名字和组件中的名字不一样的时候这么用)
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中(此处接收一个getter的数组，也可以接收一个对象，下边的例子)
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount',
//....
}),
//这里还可以写自己的计算属性
}
}
</script>
网友评论