vuex的原理及使用

vuex的工作流程

总述如图：

vuex的优势：

• Vuex的状态存储是响应式的，可跟踪每一个状态变化，一旦它改变，所有关联组件都会自动更新相对应的数据。
• 共享数据，解决了非父子组件的消息传递（将数据存放在state中）。
• 统一状态管理，减少了请求次数，有些情景可以直接从内存中的state获取数据。

vuex的使用场景：

• 当一个组件需要多次派发事件时：如购物车数量加减。
• 跨组件共享数据、跨页面共享数据：如订单状态更新。
• 需要持久化的数据：如登录后用户的信息。
• 当开发中大型应用，适合复杂的多模块多页面的数据交互，考虑如何更好地在组件外部管理状态时。

vuex的作用：

vuex的作用是将应用中的所有状态都放在一起，集中式来管理，需要声明的是这里的说的
状态是指vue组件中data里面的属性。

vuex的组成：(个人理解笔记)

	**state**：定义==应用状态的默认初始值==，页面显示所需的数据从该对象中进行读取是==唯一数据源==。
	**getter**：像 computed 计算属性一样，getter 返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。
	**mutation**：mutations 里面装着改变数据的方法集合，处理数据逻辑的方法全部放在 mutations 里，使数据和视图分离。
	**action**：action 提交的是 mutation，通过 mutation 来改变 state ，而不是直接变更状态。
	**module**：模块文件

vuex的使用：
1.在项目根目录下，新建 store 目录，在此目录下新建 index.js 文件。在 index.js 文件配置如下：

<!-- 页面路径：store/index.js -->
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);//vue的插件机制

//Vuex.Store 构造器选项
const store = new Vuex.Store({
    state:{//存放状态
        "username":"foo",
        "age":18
    }
})
export default store

2.在 main.js 中导入文件。

<!-- 页面路径：main.js -->
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
const app = new Vue({
    store,
    ...App
})
app.$mount()

3.在组件中使用，通过 this.$store 访问到 state 里的数据。

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <text>用户名：{{username}}</text>
    </view>
</template>
<script>
    export default {
        data() {
            return {}
        },
        computed: {
            username() {
                return this.$store.state.username 
            }
        }
    }
</script>

优化：通过 mapState 辅助函数获取。
注意：当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。 为了解决这个问题，我们可以使用 mapState 辅助函数 帮助我们生成计算属性，让你少按几次键：

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>用户名：{{username}}</view>
        <view>年龄：{{age}}</view>
    </view>
</template>
<script>
    import { mapState } from 'vuex'//引入mapState
    export default {
        data() {
            return {}
        },
        computed: mapState({
         //方法一：
            // 从state中拿到数据 箭头函数可使代码更简练
            username: state => state.username,
            age: state => state.age,
         //方法二：当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组
            //'username',//映射 this.username 为 store.state.username
            //'age',
          //方法三：使用对象展开运算符
          //使用对象展开运算符将此对象混入到外部对象中
            //...mapState({
               // username: state => state.username,
               // age: state => state.age,
            })
        }) 
    }
</script>