|
我们知道在我们学习vue的过程中，在父子之间的传值我们通过props和$emit是可以很好的实现的，但当我们要对项目中兄弟组件进行传值的时候，就变得麻烦起来了，所以vue引入了vuex来帮我们很轻松的解决这个问题
什么是vuex？
vuex是vue框架中的状态管理模式，它由五个部分组成即：state，actions，mutations，getters和module来组成
vue中如何使用vuex
npm install vuex
- 在已创建的vue项目中创建一个store文件夹，在文件夹中建立一个index.js文件引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
getters:{
},
modules: {
}
})
在main.js中引入store文件
import store from './store'
//在vue注入
?new Vue({
el: '#app',
store: store,
})
vue各个属性的功能
state
用于保存储存所有组件的公共数据的地方，组件可以通过this.$store.state来获取数据
mutations
mutations中放入操作state中数据的函数方法，一般来说，如果要对state中的数据进行操作，就只能通过他来进行操作，但此方法中不能操作异步函数，组件通过this.$store.commit来调用
actions?
actions里面一般放入异步的操作，它会通过操作mutations中的函数从而达到操作state数据中的效果，actions中也不能直接操作state中的数据，一般来说actions中放入一些复杂的函数逻辑，mutations中直接放入对state数据增删改查的简单逻辑，组件通过this.$store.dispatch来调用
?getters
你可以将getters理解成store的计算属性，getters的返回值会根据他的依赖被保存起来，只有当他依赖改变时才会重新计算，他只能对state中的数据进行加工形成新的数据，也不能修改state中的数据，组件通过this.$store.getters调用
?Module
因为vuex为单一的状态树，当vuex中数据过多的时候，vuex就换显的很臃肿，所以为了解决这种问题，vuex允许我们将store模块分割成模块（module），每个模块都有自己的state，mutations，getters，actions属性
?vuex的使用场景
音乐播放，登录状态，购物车管理等
vuex与本地储存的区别
vuex储存在内存中，它储存的是一种状态，他主要用于组件间的传值，起到响应式的作用，页面刷新他就会消失，而localstorage是浏览器提供的接口，让你存的是文件，以文件的形式存储在本地，页面刷新不会消失，一般用于页面间的传值，组件中值改变，另一个组件无法随之变化，无法做到响应式
|