VueX基础篇
1.VueX是什么：
“Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。”
---------------------------------https://v3.vuex.vuejs.org/zh/
2.VueX的作用与使用规则Vuex 的状态存储是响应式的。
1.当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
store.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })
//在store中改变状态，常用在登录的时候获取用户信息。
store.mutations.increment()
在组件 index.vue 中改变状态
<template> <div></div> </template> <script> export default { components: {}, data() { return { } }, mounted() {
this.changeStore()
}, watch: {}, computed: {}, methods: {
changeStore(){
this.$store.commit('increment')
}
} } </script> <style lang="scss" scoped></style>
3.我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。
3.在组件中获取状态、使用状态。
注：很多同学喜欢直接在mounted或created的时候直接获取在data中
错误示例：
data(){
return{
count:''
}
},
mounted(){
this.count = this.$store.state.count;
}
这样写虽然可以获取到状态，但是当当前组件改变了sotre中的数据时，当前组件 JS中是没办法获取到新的数据的，除非只写在view中，VueX的响应式原理。
正确的写法：
由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性 (opens new window)中返回某个状态：
<template>
<div>{{count}}</div>
</template>
<script>
export default {
components: {},
data() {
return {
dictList: {}
}
},
mounted() {
},
watch: {},
computed: {
count(){
return store.state.count
}
},
methods: {}
}
</script>
<style lang="scss" scoped></style>
4.getter的作用及使用方法
1.上面我们讲了vuex中的state，这时我们会想，会不会存在一种情况是，即组件中需要用到的某一状态只有部分数据是组件中或其他处理函数中想用到的呢，这样在每一个组件中都要写重复的代码去获取这一数据，岂不是很麻烦，这时getter刚好可以为我们解决这一问题。
（1）不使用getter的情况，在每个组件中都需要进行这一步去处理获取到的状态，然后再使用
computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } }
（2）使用getter，我们将获取到的state数据直接使用getters进行处理。
const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false }，
{ id: 2, text: '...', done: false }，
{ id: 2, text: '...', done: false }，...
] },
getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } } })
在组件中我们可以直接通过getters获取需要的响应数据
computed: { doneTodosCount () { return this.$store.getters.doneTods } }
2.mapGetters辅助函数的使用
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
methods:{
console.log(this.doneTodosCount) //{..},
}
}
5.mutation的作用及使用方法
1.从上面你应该知道了什么是state，说白了就是VueX的核心----------状态。而改变状态的唯一途径就是通过mutation进行提交。
Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 变更状态 state.count++ } } })
注意，我们绝对不应该这样去改变状态，以下是错误示例：
//1.在组件中
this.$store.state.count++；
//2.在store中
const store = new Vuex.Store({
state: {
count: 1
},
})
store.state.count++
不要问我为什莫，厂长是我表哥
6.action的作用及使用方法
1.Action 类似于 mutation，不同在于：
（1）Action 提交的是 mutation，而不是直接变更状态。
（2）Action 可以包含任意异步操作。
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
注意：我们可以在 action 内部执行异步操作，但mutation不行,mutation只能执行同步操作，如登录功能，保存用户登录信息，action能避免很多不必要的麻烦。
7.模块化状态管理
1.在Vue中State使用是单一状态树结构，如果项目比较大，使用的store数据比较杂、多，store 对象就有可能变得相当臃肿，难于维护。出于此原因，VueX提供了模块化设计,他允许我们将state拆分成多个不同类型对象-------------Modules。
const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) //当前文件获取 store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态
//在组件中获取
this.$store.state.a //moduleA 的状态
this.$store.state.b //moduleB 的状态
同样的每一个module都有与之对应的mutation、action和getter。
