vuex的四种状态

最新推荐文章于 2024-01-11 08:14:43 发布

weixin_30852419

最新推荐文章于 2024-01-11 08:14:43 发布

阅读量321

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bao2333/p/10194874.html

版权

state
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    state是数据
    Vuex中有一个构造函数是Store
    我们想要创建vuex实例就需要new这个store
    const store = new Vuex.Store({
      state: {

      }
    })
    const app = new Vue({
      store
    })
    将store放入vue的配置对象后，该 store 实例会注入到根组件下的所有子组件中
    在获取state中的值时，在组件中写computed
    computed: {
      数据名 () {
        return this.$store.state.数据名
      }
    }
  -->
</body>
</html>

getter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
</head>
<table>
</table>
<body>
      <!-- 
　　　　　　getters中的所有getter都是函数
          每个getter中都有一个state参数
          每个getter中都有第二个参数getters

          getter返回的除了数据以外还可以返回函数，这样可以通过传参的方式，得到对应的数据

          getter直接返回的是数据，那么在使用时
          computed: {
            数据名 () {
              return this.$store.getters.getter名
            }
          }

          如果返回的是函数
          computed: {
            数据名 () {
              return this.$store.getters.getter名(参数)
            }
          }
　　　　-->
</body>
</html>

mutation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
</head>
<table>
</table>
<body>
  
</body>
<script>
修改state只能用mutation去进行修改

      mutations: {
        mutation (state) {
          // 因为mutation要修改state，所以他的第一个参数为state mutation想要被调用，需要在一些地方调用this.$store.commit('mutation')
        }
      }

      // 触发mutation
      store.commit('mutation')


      大部分情况我们需要给mutation提交数据
      store.commit('mutation', 数据)

      那么在mutation的第二个参数中就是commit过来的数据
      mutations: {
        mutation (state, payload) {
          payload就是commit过来的数据
        }
      }

</script>
</html>

action
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
</head>
<table>
</table>
<body>
      /* 
      action中就是专门完成异步请求的

      发起请求，请求成功后commit(mutation, 请求结果)将数据发送给mutation
    
    */

</body>
</html>

转载于:https://www.cnblogs.com/bao2333/p/10194874.html

weixin_30852419

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuex的四种状态

state<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫