vuex入门

最新推荐文章于 2024-09-30 16:19:08 发布

掉头发类型的选手

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量128

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/h360583690/article/details/120181164

版权

前言

当我们学习一种新的知识的时候，首先应该搞清楚它是什么？为什么要用它？它是怎么用的？

一、vuex是什么？

在文档中的解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

文档：https://vuex.vuejs.org/zh/

vuex中有五个属性， state，getters，mutation，action，modules

vuex就像是为了方便前端的数据操作而建的一个暂时存数据的仓库，这个仓库的名字就叫store。数据存放在数据模型（state）中，这里面的数据都是静态数据，是共享的。

getters的作用是取得数据模型（state）中的数据，不能对数据进行修改，不能对原数据造成影响。

如果要对数据修改运用到mutation,修改 Vuex 的 store 中的状态的唯一方法是提交 mutation,

方法是同步的，修改数据后将数据放到state中。

action中可以包含任何的异步操作，如果直接在mutation中执行异步操作，会使数据失效，所以提供了action执行异步操作。action不能直接变更状态，就是不能提交到state中，要先提交到mutation中。

当项目太大时，会使用modules对项目进行模块化管理，模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

二、为什么要使用vuex

为什么要使用vuex，比如说：现在需要请求后台的数据，有100个页面都要使用一个接口中的数据，就要请求100次，如果用状态机去请求接口，然后将得到的数据暂时存储到这个仓库中，所有的组件都让它从这个仓库中取数据，更新数据也集中到这一个地方，方便了数据的管理，也避免了资源的浪费。

也就是为了多个组件对应一份数据，方便数据管理。

三，vuex的使用

<body>
  <div id="app">
    {{msg}} <br>
    state: {{msg}} <br>
    getters: {{reMsg}} <br>
    <ul>
      <li v-for="(item, index) in tableData" :key="index">{{item.name}}</li>
    </ul>
  </div>
  <script>
    // 1.状态机的声明
    let store = new Vuex.Store({
      // 数据模型（存放静态数据）
      //是作为唯一数据源存在的
      state: {
        msg: 'vuex msg',
        tableData: []
      },
      // 相当于仓库的计算属性
      //返回值会根据它的依赖被缓存起来，依赖值改变->重新计算
      getters: {
        reMsg(state) {
          return state.msg.toUpperCase()
        }
      },
      // 突变  相当于事件  不能执行异步操作
      //有一个事件类型和回调函数，在回调函数进行状态更改
      //将数据（state）作为第一个参数，payload用户传入额外的参数
      //payload（荷载），使数据传输更稳定
      mutations: {
        SET_TABLEDATA(state, payload) {
          state.tableData = payload
        }
      },
      // 动作  异步的操作
      actions: {
        //也可以直接解构，传入{ commit }，可以简化代码
        findAllCategory(context) {
          let res = [
            { name: '第一' },
            { name: '第二' },
            { name: '第三' },
          ]
          // 提交突变  提交到mutation，不能直接变更状态
          context.commit('SET_TABLEDATA', res)
        },
      }
    })

    // 解构辅助函数
    let { mapState, mapGetters, mapMutations, mapActions } = Vuex

    let vm = new Vue({
      el: "#app",
      data: {
        msg: 'hello vue'
      },
      computed: {
        // vuex的辅助函数 mapState mapGetters mapMutations mapActions
        ...mapState({
          vuexMsg: 'msg',
          tableData: 'tableData'
        }),
        ...mapGetters(['reMsg']),
      },
      methods: {
        // 使用辅助函数来映射动作/突变
        ...mapActions(['findAllCategory']),
        ...mapMutations(['SET_TABLEDATA']),
      },
      created() {
        //在加载页面时就使用findAllCategory方法
        this.findAllCategory()
      },
      // 2.状态机的注册
      store
    })
  </script>
</body>