vuex语法讲解

最新推荐文章于 2022-05-12 21:10:16 发布

依米_

最新推荐文章于 2022-05-12 21:10:16 发布

阅读量254

点赞数

分类专栏： vuex

本文链接：https://blog.csdn.net/qq_41153478/article/details/83276028

版权

vuex 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

state的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../node_modules/vuex/dist/vue.js"></script>
    <script src="../../node_modules/vuex/dist/vuex.min.js"></script>
</head>
<body>
<div id="app">
  <h2>{{msg}}</h2>
  <counter v-bind:count="count"></counter>
</div>
<script>
  const counter = {
      template:`
      <div>{{count}}</div>`,
      computed:{
      count(){
        return this.$store.state.count;

      // props:['count']
  }}}
  const store = new Vuex.Store({
    state:{
      count:10
    }
  });
  new Vue({
  el:"#app",
  store,
  data:{
    msg:"Vuex的使用",
    count:15
  },
  components:{
    counter
  }
  })
</script>
</body>
</html>
<script>
  // import Counter from "../../src/components/Counter";
  // export default {
  //   components: {Counter}
  // }
</script>

mutations的使用,点击提交按钮,改变值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-mutations</title>
    <script src="../../node_modules/vuex/dist/vue.js"></script>
    <script src="../../node_modules/vuex/dist/vuex.min.js"></script>
</head>
<body>
<div id="app">
  <h2>{{msg}}</h2>
  <a href="javascript:;" @click="add">点击</a>
  <counter></counter>
</div>
<script>
  const counter = {
      template:`<div>
      <div>点击的数量:{{count}}</div>
      <div>用户名:{{name}}</div>
      </div>`,
      computed:{
      count(){
        return this.$store.state.count;
      },
      name(){
          return this.$store.state.name;
        }
  }};
  const store = new Vuex.Store({
    state:{
      count:10,
      name:'java'
    },
    mutations:{
      increment(state,num){
      state.count=num;
      },
      updateName(state,userName){
        state.name=userName;
      }
    }
  });
  new Vue({
  el:"#app",
  store,
  data:{
    msg:"Vuex的使用",

  },
  components:{
    counter
  },
  methods:{
    add(){
    this.$store.commit('increment',100),
    this.$store.commit("updateName",'wang')
    }
  }
  })
</script>
</body>
</html>
<script>
  // import Counter from "../../src/components/Counter";
  // export default {
  //   components: {Counter}
  // }
</script>

actions的使用,action来提交mutations里的数据

,action第一个概念是用来提交mutations,第二个他是异步的,里面可以定义异步,下面讲解怎么去提交mutations

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-actions</title>
    <script src="../../node_modules/vuex/dist/vue.js"></script>
    <script src="../../node_modules/vuex/dist/vuex.min.js"></script>
</head>
<body>
<div id="app">
  <h2>{{msg}}</h2>
  <a href="javascript:;" @click="add">点击</a>
  <counter></counter>
</div>
<script>
  const counter = {
      template:`
      <div>点击的数量:{{count}}</div>
      `,
      computed:{
      count(){
        return this.$store.state.count;
      },

  }};
  const store = new Vuex.Store({
    state:{
      count:10,

    },
    mutations:{
      increment(state,num){
      state.count=num;
      },

    },
    actions:{
      incrementAction(context,num){
        context.commit("increment",num);
      }
    }
  });
  new Vue({
  el:"#app",
  store,
  data:{
    msg:"Vuex的使用",

  },
  components:{
    counter
  },
  methods:{
    add(){
    this.$store.dispatch("incrementAction",5);
    }
  }
  })
</script>
</body>
</html>
<script>
  // import Counter from "../../src/components/Counter";
  // export default {
  //   components: {Counter}
  // }
</script>

依米_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuex语法讲解

state的用法&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="../../node_modules/v
复制链接

扫一扫