vuex语法讲解

刺骨的言语ヽ痛彻心扉 2022-05-04 06:56 125阅读 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>