状态管理
我们在项目中常见到多个组件访问同一数据的情况，也会根据数据的变化做出响应，这时候就需要我们设置一个全局的状态管理，就可以去使用Vuex，它使用的是集中式存储管理应用程序中所有组件的状态，调试的工具可以是使用vue-devtools。vue3中如果一个对象需要被多个实例共享，我们可以使用reactive方法把这个对象变成响应式数据。store是用来储存状态的操作。组件不能直接修改属于store的状态，需要通过分发事件然后通知store执行操作。
vue3中的npm安装和vue2中有一些不同，如果使用yarn安装需要加关键字add，还可以使用CDN去引入vuex，我们需要注意的是vue3中安装vuex使用的是vuex@next而不是vuex。在vue3中的脚手架在main.js中创建store实例使用的是createStore，然后使用use方法将实例作为插件安装。vuex中我们通过提交mutation()函数可以改变store中的状态。这个函数类似于事件，每个函数都有一个字符串的事件类型和处理器函数，处理器函数是用来改变状态的，接收的参数有state。这个函数中的事件，是通过store.commit方法传递进来的，传递进来后，我们才能在mutation中去使用。这个方法提交mutation时，还可以传入额外的参数在里面。mutation的类型还可以使用常量去代替，为了方便我们可以把这些常量存在一个js文件中。如果组件中需要提交的mutation过多时，我们可以使用mapMutation()的辅助函数将组件中的方法映射为store.commit()调用从而来简化mutation的提交。这个函数的参数除了是使用字符串数组之外还可以使用一个对象。
npm install vuex@next --save
yarn add vuex@next --save
如果当一个组件需要使用多个store状态属性时，可以使用mapState()辅助函数生成计算属性来简化重复的代码。显示的形式是字符串，冒号前面的是计算属性的名字，后面跟着的则是状态属性的名字。使用时为了方便我们直接使用字符串，但是需要注意的是，如果在计算属性中访问组件内的数据属性，我们只能使用普通函数的方式。
import { mapState } from 'vuex';
export default {
data() {
return {
name: 'zss'
}
},
computed: mapState({ fullName(state) {
return this.name + state.full
}})
}
