vuex中的state、getters、mutations、actions之间的关系用法笔记

最新推荐文章于 2024-09-16 03:58:35 发布

代码无边，回头是岸

最新推荐文章于 2024-09-16 03:58:35 发布

阅读量1.1w

点赞数 14

分类专栏：笔记文章标签：笔记

本文链接：https://blog.csdn.net/qq_41810005/article/details/84820710

版权

笔记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一、state的用法

<body>
  <!-- 
    想要获取到state中的数据

    {{$store.state.属性}}

    以为这个表达式很长，所以我们可以直接通过computed去获取

    {
      computed: {
        属性名 () {
          return this.$store.state.属性
        }
      }
    }

    {{属性名}}


   -->
  <div id="app">
    {{$store.state.msg}}
    <br>
    {{msg}}
    <br>
    {{m}}
  </div>
  <script src="./vue.js"></script>
  <script src="./vuex.js"></script>
  <script>
    const store = new Vuex.Store({
      // state是一个对象，包含了各个组件中的状态（数据），state是一个全局数据，在任何地方都可以获取
      state: { 
        msg: 'Hello Vuex'
      }
    })

    const app = new Vue({
      el: "#app",
      store,
      data: {
        m: '自己的数据'
      },
      computed: {
        msg () {
          return this.$store.state.msg
        }
      }
    })
  </script>
</body>

二、getters的用法

<body>
  <div id="app">
    <!-- {{$store.getters.boys}} -->
    {{boys}}
    <!-- {{$store.getters.boysLength}} -->
    <br>
    {{$store.getters.ageStu(53)}}
  </div>
  <!-- 

    {
      state: {

      },
      getters: {
        getter名 (state, getters) {
          // 因为我们getter的数据就是从state中得到
          // 我们还可以从其他的getters中得到对应的数据
        },
        getter名 (state) {
          // 返回一个函数
          return (参数) => {
            // 函数中返回数据 我们就可以在函数中去添加形参
            return 数据 
          }
        }
      }
    }

    在使用时，直接返回数据的getter那么我们可以
    {{$store.getters.getter}}
    返回函数的，我们可以
    {{$store.getters.getter(参数)}}


    不管是getter还是state，使用时，我们都可以直接
    $store.getters/state.属性名

    因为太长，所以可以写在computed
    computed: {
      属性名 () {
        return this.$store.getters/state.属性名
      }
    }

   -->
  <script src="./vue.js"></script>
  <script src="./vuex.js"></script>
  <script>
    const store = new Vuex.Store({
      state: {
        stus: [
          {
            name: '张三21',
            age: 18,
            sex: '女'
          }, {
            name: '张三42',
            age: 14,
            sex: '女'
          }, {
            name: '张三42',
            age: 54,
            sex: '女'
          }, {
            name: '张三2',
            age: 34,
            sex: '女'
          }, {
            name: '张三4',
            age: 13,
            sex: '男'
          }, {
            name: '张三52',
            age: 53,
            sex: '男'
          }
        ]
      },
      getters: {
        boys (state) {
          return state.stus.filter(stu => stu.sex === '男')
        },
        boysLength (state, getters) {
          return getters.boys.length
        },
        ageStu (state) {
          // return state.stus.filter(stu => stu.age > 20)
          return (age) => {
            return state.stus.filter(stu => stu.age > age)
          }
        },
        /* ageStu: state => age => state.stus.filter(stu => stu.age > age) */
      }
    })

    const app = new Vue({
      el: '#app',
      store,
      computed: {
        boys () {
          return this.$store.getters.boys
        }
      }
    })
  
  </script>
</body>

三、mutation的用法

<body>
  <!-- 
    更改vuex中state的唯一方法就是提交mutation，mutation的代码都是同步的

    mutation类似于自定义事件

    想要改变state中的值，那么我们只需要在mutations中添加对应的mutation函数

    这个函数只需要管改变操作即可

    然后在组件中的事件函数里提交对应mutation即可


    {
      mutations: {
        mutation函数 (state, payload) {
          // 因为mutation改变的是state中的值，所以我们参数中有一个state方便我们快速改变对应的值
          // payload接收commit处传递过来的数据
        }
      }
    }


    组件函数中提交mutation
    {
      methods: {
        函数 () {
          this.$store.commit('mutation名字', 数据)
        }
      }
    }

    有些时候对象是不支持响应式的，所以改变对象我们应该使用
    this.$set(对象, '属性', '属性值')
    this.$delete(对象, '属性')
    
    Vue.set()
    Vue.delete()

  -->
  <div id="app">
    <button @click="changeMsg">按钮</button>
    <br>
    {{msg}}
    <br>
    <ul>
      <li v-for="value in obj">{{value}}</li>
    </ul>
  </div>
  <script src="./vue.js"></script>
  <script src="./vuex.js"></script>
  <script>
  

    const store = new Vuex.Store({
      state: {
        msg: '消息'
      },
      mutations: {
        changeMsg (state, payload) {
          // 在这里改变state即可
          state.msg = payload.msg
          
        },
        [mutation_types.MUTATION1] () {

        }
      }
    })

    const app = new Vue({
      el: '#app',
      store,
      data: {
        obj: {
          a: 1
        }
      },
      computed: {
        msg () {
          return this.$store.state.msg
        }
      },
      methods: {
        changeMsg () {
          this.$store.commit('changeMsg', {msg: '组件中的值', a: 2})
        }
      }
    })
  </script>
</body>

四、action的用法

<body>
  <div id="app">
    {{users}}
  </div>
  <!-- 
    action用法和mutation类似

    action中涉及的是异步操作
    action需要使用store.dispatch进行分发

    this.$store.dispatch('action名字', 数据)


    actions: {
      action名字 (context, payload) {
        进行异步请求
        context是一个和store一模一样的对象，payload就是dispatch时传递过来的数据

        context.commit('mutation')
      },
      action名字 ({commit}, payload) {
        commit('mutation')
      },
      action名字 ({commit, state}, payload) {
        // 在这里得到state的目的是，获取到state中的数据，但是不能修改
      }
    }
   -->
  <script src="./vue.js"></script>
  <script src="./vuex.js"></script>
  <script src="./axios.min.js"></script>
  <script>
    const store = new Vuex.Store({
      state: {
        users: []
      },
      mutations: {
        setUsers (state, users) {
          state.users = users
        }
      },
      actions: {
        getUsers (context, page) {
          axios.get('http://localhost:3000/user/listpage?page=' + page).then(res => {
            // console.log(res.data)
            // 在action的请求结果中提交mutation
            // 因为context和$store是一致的，所以我们可以直接调用context的commit方法去提交mutation
            context.commit('setUsers', res.data)
          })
        }
      }
    })

    const app = new Vue({
      el: '#app',
      store,
      computed: {
        users () {
          return this.$store.state.users
        }
      },
      created () {
        // 在这里进行分发action
        this.$store.dispatch('getUsers', 2)
      }
    })
  
  </script>
</body>

五、总结

<script>
    /* 
      state
        保存了组件的数据
      
        如果想要在组件中使用msg这个数据，最简单的
        直接
          模板中{{$store.state.msg}}
          函数中this.$store.state.msg

          想要好看，则
          computed: {
            msg () {
              return this.$store.state.msg // 其他地方就可以直接使用msg
            }
          }
    
      getter 在组件中使用时和state方法类似，要把state改成getters
        想要使用reverseMsg
        直接
          模板中{{$store.getters.reverseMsg}}
          函数中this.$store.getters.reverseMsg
        
        想要好看，则
        computed: {
          reverseMsg () {
            return this.$store.getters.reverseMsg
          }
        }
      
      mutation
        mutation是一个函数，它的作用就是修改state，而且修改state只能通过这一个方式
        
        我们如果想要在组件中对某个数据进行修改，则，直接提交对应的mutation即可
        this.$store.commit('setMsg', '相关数据')

        因为mutation要改变state，所以在mutation中有参数state和载荷payload

      action
        用法类似于mutation
        
        一、给mutation传值需要commit  
          这是接受的操作
          {
            mutations: {
              mutation函数 (state, payload) {
                // 因为mutation改变的是state中的值，所以我们参数中有一个state方便我们快速改变对应的值
                // payload接收commit处传递过来的数据
              }
            }
          }

          组件函数中提交mutation，就是给mutation传值
          {
            methods: {
              函数 () {
                this.$store.commit('mutation函数', 数据)
              }
            }
          }

        二、给action传值需要dispatch
        this.$store.dispatch('action名字', 数据)
        
        因为mutation是同步修改state，所以参数中有state
        但是action是异步获取数据，获取后的数据想要修改到state，因此action中一定要提交mutation去修改state，所以在action的函数中有参数context，这个context就是一个store
        如果想要提交，则context.commit('mutation中的函数名'，传的值)
        
        
    */  
    
    const store = new Vuex.Store({
      state: {
        msg: '数据'
      },
      getters: {
        reveseMsg () {
          return msg.split('').revese().join('')
        }
      },
      mutations: {
        setMsg (state, payload) {
          state.msg = payload
        } 
      }
    })
     <!-- 

    Vuex中常用的就
      state mutations actions

    如果我们想要在页面中渲染一些数据时，那么我们就可以把数据放在state中 state

    如果我们要操作页面元素修改数据时，那么我们就要在事件处理函数中this.$store.commit('mutation')  提交mutation 让mutation去修改

    如果我们要操作页面元素获取新的数据时，那么我们就要在事件处理函数中this.$store.dispatch('action')  然后在请求数据成功的时候，让action去commit('mutation')  然后mutation修改数据

    action中的代码只涉及到，请求数据 提交mutation

    mutation 只涉及到修改state

    组件中设置到提交mutation或者分发action

   -->
  </script>