Vuex——怎么使用辅助函数？

最新推荐文章于 2023-07-09 00:44:26 发布

chengzhangdewo

最新推荐文章于 2023-07-09 00:44:26 发布

阅读量432

点赞数 1

文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/chengzhangdewo/article/details/120782424

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vuex.js"></script>
</head>

<body>
  <div id="app">
    <h3>{{data1}}</h3>
    <h4>vuex-state-{{msg}}
      <button @click="SET_MSG('再见vuex')">修改状态机数据</button>
    </h4>
    <h5>vuex-getters-{{upperMsg}}</h5>
    <ul>
      <li v-for="(item, index) in categories" :key="index">
        栏目编号： {{item.id}}
        栏目名称： {{item.name}}
        <!-- <button @click="deleteCategoryById(item.id)">删除</button> -->
      </li>
    </ul>
  </div>
  <script>
    // 1.声明Vuex实例store
    let store = new Vuex.Store({
      state: {
        msg: 'this is vuex data',
        categories: []
      },
      getters: {
        upperMsg(state) {
          return state.msg.toUpperCase()
        }
      },
      mutations: {
        // 突变是修改state中数据的唯一方法
        // 突变方法中接受两个形参，第一个是state，第二个是调用突变时传递的实参
        SET_MSG(state, payload) {
          state.msg = payload
        },
        SET_CATEGORIES(state, payload) {
          state.categories = payload
        }
      },
      actions: {
        // 动作，用来存放组件共享的异步方法
        async findAllCategories(context) {
          // let res = await ajax()
          let res = {
            status: 200,
            message: '查询成功',
            data: [
              { id: 1, name: '校园新闻' },
              { id: 2, name: '热点新闻' },
              { id: 3, name: '娱乐新闻' },
              { id: 4, name: '资讯快报' },
            ],
            timestamp: 1634194101227
          }
          // 提交突变，来修改状态机内部的数据
          console.log(context);
          // 通过commit()方法来提交突变，第一个参数是突变函数的名字，第二个参数是突变函数的实参
          context.commit('SET_CATEGORIES', res.data)
        },
        async deleteCategoryById({ commit }, id) {
          let res = await axios.get('url', { id })
        }
      }
    })

    let vm = new Vue({
      el: '#app',
      data: {
        data1: 'this is vm data'
      },
      computed: {
        // 使用Vuex中的辅助函数来映射数据
        ...Vuex.mapState(['msg', 'categories']),
        ...Vuex.mapGetters(['upperMsg'])
      },
      methods: {
        // 通过辅助函数，将vuex中的突变以及动作映射到methods中，然后再手动调用
        ...Vuex.mapMutations(['SET_MSG', 'SET_CATEGORIES']),
        ...Vuex.mapActions(['findAllCategories', 'deleteCategoryById'])
      },
      created() {
        this.findAllCategories()
      },
      // 2.将状态机实例，注入到vue实例中
      store: store
    })
  </script>
</body>

</html>

chengzhangdewo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vuex——怎么使用辅助函数？

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&.
复制链接

扫一扫