Vue 中 store 基本用法

Posted 2023-04-27

参考技术A 用来管理状态，共享数据，在各个组件之间管理外部状态

第一步：项目安装vuex插件

第二步：引入vuex，并通过use方法使用它

第三步： 创建状态仓库

//创建状态仓库，注意第二个Store是大写的不能改，,state也是不能改

第四步：在main.js注入Vue实例当中

第五步：通过this.$sore.state.XXX拿到全局状态

七、Vuex的相关操作
vuex状态管理的流程
view——­>actions—–>mutations—–>state——­>view

一、
方法一、更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

在其他组件中利用commit来触发mutations函数

this.$store.commit('increase',xxx) xxx 表示传入参数，如果需要传入多个参数，将 xxx 表示成对象 xxx1:'',xxx2:'' 方式传入，在对象内构成多个需要传入参数。
方法二：
利用actions中对mucations进行操作，间接对state进行修改

利用dispatch来触发actions函数

mucations和actions两者之间区别
1、传递参数不一样，前者传递是state，后者传递是context。
2、调用的方式不一样，前者靠 this.$store.commit('xxx') 触发，后者靠 this.$store.dispatch('xxx') 触发。
3、actions可以包含异步操作，但是mutation只能包含同步操作

二、getters是vuex中的一个属性，主要作用于vue中的计算属性（computed）类似，用来存放一些经过修改的数值

在调用getters中的内容是使用$store.getters.函数名进行调用

总结：在工程化项目中，vuex所有内容建议和routers一样，在src中建立一个state文件夹>index.js，将vuex内容写在index.js中，再导出到main.js中。

vue中$store的用法

Store就是把它们联系到一起的对象。Store有以下职责：

• 维持应用的state：
• 提供getState( )方法获取state；
• 提供dispatch(action)方法更新state；
• 通过subscribe(listener)注册监听器；
• 通过subscribe(listener)返回的函数注销监听器

前台搭配mapGetter使用，引入后，放在computed中

• 　　import { mapGetters } from ‘vuex‘;

• computed: {
    ...mapGetters([
      ‘getLogin‘,
      ‘getuname‘,
      ‘getpwd‘
    ])
  },