[JavaScript知识库]vue之vuex

我们知道在我们学习vue的过程中，在父子之间的传值我们通过props和$emit是可以很好的实现的，但当我们要对项目中兄弟组件进行传值的时候，就变得麻烦起来了，所以vue引入了vuex来帮我们很轻松的解决这个问题

什么是vuex？

vuex是vue框架中的状态管理模式，它由五个部分组成即：state，actions，mutations，getters和module来组成

vue中如何使用vuex

• npm安装

npm install vuex

• 在已创建的vue项目中创建一个store文件夹，在文件夹中建立一个index.js文件引入vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

• 在index.js完成初始的配置

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是浏览器提供的接口，让你存的是文件，以文件的形式存储在本地，页面刷新不会消失，一般用于页面间的传值，组件中值改变，另一个组件无法随之变化，无法做到响应式