61 Vuex(状态管理)

61 Vuex(状态管理)

三、Vuex(状态管理)

3.1 概念

vuex是状态管理。指的是多个组件共享一个数据，那么我们可以创建一个仓库统一去管理当前的所有数据。也就是共享仓库的概念。
​
-----------------------
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
​
​
------------------
vuex是响应式的数据变化。一个组件修改了值，所有的地方都跟着发生变化

3.2 官网

https://vuex.vuejs.org/zh/

3.3使用场景

vuex 适应于大型的单页应用
​
如果你的项目不够复杂，你根本想不到用vuex,那就别用！！！
​
如果你发现，用它真香，那就自然而然调用
​
它的根本目的：用于管理数据（多个组件共享一个数据！！！）

3.4 安装

一、创建项目的时候，就选择安装vuex 
它会把默认的配置都给你配好，包括文件和文件夹
​
二、通过自己下载并配置
npm install(i) vuex
并没有默认的文件以及文件夹

3.5 配置基础仓库

store=>index.js

//引入核心库
import Vue from 'vue'
//引入状态库
import Vuex from 'vuex'
​
//Vuex是个对象，里面有仓库属性和辅助性函数
//new Vuex.Store() 实例化之后得到了仓库上所有的属性和方法
​
//调用插件
Vue.use(Vuex)
​
// console.log(new Vuex.Store(),'？？？？');
export default new Vuex.Store({
    state:{//唯一的数据管理
        name:'巧克力1'
    }
})

main.js

//引入封装好的仓库
import store from './store'
​
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.6 注意项

vuex 不能刷新，因为一刷新就回到初始状态
​
​
面试题:
vuex和离线存储有什么区别？？？？
相同点:都可以进行数据的存储
不同点：vuex一变化，其他使用数据的地方都跟着发生变化。离线存储数据发生变化，必须要刷新（重新取值，它没有响应式）才能获取新的数据。但是vuex一刷新就回到初始状态。
​
真正做项目的过程中结合使用！！！
​

3.7 Vuex的核心属性

• state

  • 概念

  state是唯一数据源，用来管理所有的层级数据

  • 使用方式

  state:{
      属性值:''
  }

   

• mutations

  • 概念

  修改state的唯一方式

  • 使用方式

  视图
  通过commit去触发一个mutation
  this.$store.commit('mutation_TYPE',payload)
  ​
  仓库
  mutations:{
      mutation_TYPE(state){
          //可以修改state
      }
  }
  ​

   

• actions

  • 概念

  它和mutation很类似
  一、它不能直接修改state
  二、它可以操作异步方法

  • 使用方式

  视图
  通过dispatch去触发一个action
  this.$store.dispatch('action_TYPE',payload)
  ​
  仓库
  mutations:{
      mutation_TYPE(state,payload){
          //可以修改state
      }
  }
  ​
  actions:{
      action_TYPE(context){
          //这个context代表对象，对象中包含了属性和方法
          context.commit('mutation_TYPE',payload)
      }
      或者
          action_TYPE({commit}){
          commit('mutation_TYPE',payload)
      }
  }
  ​

• modules 模块

  • 概念

  它是为了解决state臃肿的问题

• getters

  • 概念

  具有缓存效果
  做为视图层和state属性之间的中间层存在

  • 用法

  getters:{
      名字(state){
          return state.属性
      }
  }

3.8 辅助性函数

3.8.1state

它是vuex的唯一数据源 
​
mapState（很少用！！！）
​
import {mapState} from 'vuex'
​
computed:{
    ...mapState(['仓库中state值'])
    ...mapState({
        想要渲染的名字:state=>state.值
    })
}

3.8.2getters

相当于计算属性。它作为，state和视图的中间层存在。它具有缓存效果
​
mapGetter
​
import {mapGetters} from 'vuex'
​
computed:{
    ...mapState(['仓库中getters值1','仓库中getters值2',...])
    ...mapState({
        想要渲染的名字:geter=>getter.值
    })
}

3.8.3 mutations

它是修改state的唯一方式，同步的
mapMutations
​
import {mapMutations} from 'vuex'
​
methods:{
    ...mapMutations(['mutations名字一致']),
    ...mapMutations({
        '自定义函数名称':'mutations名字'
    })
}

3.8.4 actions

它不能直接修改state,它只能commit一个mutations
它可以操作异步方法
mapActions

import {mapActions} from 'vuex'

methods:{
	...mapActions(['actions名字一致']),
	...mapActions({
		'自定义函数名称':'actions名字'
	})
}

• 概念

作者担心你直接触发行动提交mutation比较麻烦。
它在代码上给你进行了优化。用的就是辅助性函数