vuex教程笔记

官方教程

1.vuex是什么

状态管理模式+库，集中式存储管理应用的所有组件的状态

全局单例模式管理

2.state

vuex使用单一状态树，用一个对象就包含了全部的应用层级状态

在vue组件中获取vuex状最简单的方法是：在计算属性中返回某个状态

computed: {//每当store.state.count变化，都会重新求取计算属性，并触发更新相关联的dom 
    count () {
         return store.state.count 
        } 
    }

3.getter

需要从store的state中派生出一些状态，例如对列表进行过滤并计数

computed: { 
    doneTodosCount () { 
        return this.$store.state.todos.filter(todo => todo.done).length 
        } 
    }

如果多个地方需要使用，可以在store中定义getter，可以理解为store的计算属性

const store = createStore({ 
    state: { 
        todos: [ 
        { id: 1, text: '...', done: true }, 
        { id: 2, text: '...', done: false } 
        ] 
    },


    getters: {
        doneTodos (state) { 
        //箭头函数是一个回调函数，todo表示数组todo中的每个对象，todo.done是过滤条件，属性为true的会被返回
        return state.todos.filter(todo => todo.done) 
        } 
    } 
})

2.1 通过属性访问

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值

// 访问
tore.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter 也可以接受其他 getter 作为第二个参数，也就是说在使用 getters 中的另一个 getter 函数时，可以使用第二个参数 getters，以访问 getters 对象中的其他属性或方法

getters: {
  // ...
  doneTodosCount (state, getters) {
    return getters.doneTodos.length
  }
}


// 访问
store.getters.doneTodosCount // -> 1

// 组件中使用
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

该函数的作用是返回已完成的待办事项数量，它实际上是通过调用另一个 getter 函数 doneTodos 来实现的。 doneTodos 函数返回一个数组，其中包含所有已完成的待办事项，因此可以通过获取这个数组的长度来获取已完成的待办事项数量。

2.2 通过方法访问

你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

这段代码定义了一个名为"getTodoById"的getter，它接受一个状态(state)作为参数，然后返回一个函数，该函数有一个参数"id"。该函数的作用是从状态中的"todos"数组中找到与传入的"id"参数匹配的todo对象，并将其返回

也就是说，当我们需要根据一个特定的id获取一个todo对象时，我们可以调用"getTodoById" getter，并将该id作为参数传递给它。该getter将会返回匹配该id的todo对象，如果找不到匹配的对象则返回undefined。

2.3 mapGetters辅助函数

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

这段代码使用了vuex库中的mapGetters函数来将getter映射到Vue组件的计算属性中。在这个组件中，通过使用对象展开运算符(...)来将mapGetters返回的对象混入到计算属性(computed)对象中，从而可以在模板中访问这些getter的返回值。

在这个例子中，'doneTodosCount'和'anotherGetter'是两个getter的名称，它们被传递给mapGetters函数作为一个数组。mapGetters函数返回一个对象，该对象包含了可以通过这些名称来访问getter的函数，这些函数可以被Vue组件的计算属性调用。

这样做的好处是可以将Vuex store中的状态和计算属性混合在一起使用，而无需在模板中访问store对象或使用显式的计算属性函数来计算派生状态。

3.mutation