Vuex初体验

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

• Vuex是什么？和Vuex的作用
  • 它采用“集中式”存储管理应用的所有组件的“状态”，并以相应的规则保证状态以一种可预测的方式发生
  • 通俗：就是一个集中存储方法或数据的东西，再直白一点：就是全局的数据或全局方式
• Vuex使用场景
  • 解决问题1：某一个值（数据），可能很多组件需要用，但是组件之间的传值太麻烦，不如弄一个全局的仓库存放，哪个组件用直接调用就可以了。
• tore（仓库）
  • state 和组件的data一样

    • 用this.$store.state.xxx来取值，是直接从Vuex中拿到的值，这个值没有赋值给当前组件的Vue对象，这个值是可以修改的

    • import {mapState} from 'vuex'； computed: { ...mapState（['xxx'])}

    • mapState把xxx赋值给了当前组件大对象一份，这个值是不可以修改的（不能直接通过this.xxx修改，因为在大对象中没有被getter和setter），可以通过this.$store.state.xxx修改源数据进行修改。所以说Vuex是单向数据流

• getters和组件的computed一样

  • 用this.$store.getters.changeStr来取值，是直接从Vuex中拿到的值，这个值没有赋值给当前组件的Vue对象，属于单向数据流

  • import {mapGetters} from 'vuex'； computed: { ...mapGetters（['changeStr'])}

  • mapState把xxx赋值给了当前组件大对象一份，这个值是不可以修改的（不能直接通过this.xxx修改，因为在大对象中没有被getter和setter），也不能通过this.$store.state.xxx进行修改，因为只有get方法，没有set方法

  • mutations和组件的methods一样

    • 第一种修改方式：import {mapMutations} from 'vuex'；methods: { ...mapMutations(['uStr'])}
    • 第二种修改方式：this.$store.commit('uStr)，可以传递第二个参数来设定值
• modules：增加了命名空间，避免重名
  • actions和mutations几乎一样，也是用来存放方法的。所以这里重点研究和mutations的区别

    • actions可以包含任意异步操作（mutations只能同步操作）

    • actions和mutations都可以修改state数据，但是不建议这样直接使用。actions是来提交mutations（通过commit来提交mutations）

    • 第一种修改方式：import {mapActions} from 'vuex'；methods: { ...mapActions(['pStr'])}

    • 第二种修改方式：this.$store.dispatch('pStr)，可以传递第二个参数来设定值

• Vuex不是持久化存储数据（cookies、localStorage），刷新或关闭网页数据会还原。如果要做持久化存储，要用两种方式：
  • 自己写localStorage或者cookies
  • 使用Vue的某个插件（封装底层也是localStorage或cookies）
• 千万不能在Vuex中请求数据