Vuex状态管理入门Demo

原创

xyphf_和派孔明 2022-07-22 09:37:41 博主文章分类：vue.js入门 ©著作权

文章标签 Vuex html vue.js 用户名 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者xyphf_和派孔明的原创作品，请联系作者获取转载授权，否则将追究法律责任

首先我们介绍state

1、首先我引入vue和vuex，因为这种方式是直接通过script标签引入的，因此我们不需要通过vue.use去使用我们的插件，

如果我们是使用组件去进行单页面开发，我们需要通过vue.use去引入我们的插件
2、首先我们建一个页面，我们通过页面的形式来讲解
3、这个是多页面的，它和单页面是不太一样的，但是语法和用法是一样的
4、接下来我们在页面里面建一个script标签

5、首先我们需要定义一个div，它有个id叫app，这是根

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vuex - State</title>
  <script src="../../node_modules/vue/dist/vue.js"></script>
  <script src="../../node_modules/vuex/dist/vuex.min.js"></script>
</head>
<body>
<div id="app">
  <!--
   8、 msg我们可以定义一个h2,我们把这个msg进行输出
  -->
  <h2>{{ msg }}</h2>
  <!--
   21、 紧接着我们counter实现下
   这个就是在组件里面去使用我们Vuex的状态
  -->
  <counter></counter>
</div>

<script>
  // 16、 使用state 接下来我们定义一个counter定时器的组件
  const counter = {
    // 17、 组件里面想使用这个count,怎么用呢？
    template:`
      <div>{{ count }}</div>
    `,
    // 18、 我们还需要定义一个computed,因为状态一旦被改变，我们需要实时去计算它的值
    // 如果不放在computed里面,我们在其他地方提交了,那么它是不会发生变化的,他就失去了意义了
    // 我们做Vuex的意义就是它在任何一个页面任何一个地方把这个值改了，在其他的地方都可以及时的呈现
    // 这就是Vuex的作用,所以必须把它放到computed里面去
    computed:{
      count(){
        // 19、 我们来计算这个count属性
        // 怎么返回，有两种方式，第一种：this.$store； 因为我们需要把counter作为一个子组件注册到vue里面去
        // 注册进去之后呢，外面的实例他已经接收了一个store对象,因此只要是Vue下面的属性它都可以拿到这个store实例
        // 它里面有个state，这样我们就可以取到count值了
        return this.$store.state.count;
      }
    }
  };

  // 10、 紧接着我们需要创建一个Vuex对象
  // 11、因为Vuex是一种数据存储的方式，我们习惯性的把它定义为Store，它其实也是默认的命名规范在里面
  // 12、这个是固定的语法，
  const store = new Vuex.Store({
    // 14、 首先我们学习下第一个状态state；
    // 我们学习Vuex有两个知识点是必须掌握的；第一个就是State；
    // 那我们就需要加一个state,它是个Object；
    state:{
      // 15、 里面比方说我们给它加一个count;它的值设置为0;这样我们就在vue里面添加了一个状态
      // 这个状态在任何一个页面任何一个组件都可以使用到，前提是我们将Vuex给注册到vue里面
      // 这就是单一的树
      count:10
    }
  });
  // 6、 紧接着我们new一个我们的vue实例
  new Vue({ // 9、 这样我们就创建了一个实例
    el:"#app",
    store, // 13、 将创建的Vuex引入，如果上面定义的是storeVuex或其他，这里必须定义成key:value的形式
           // 也就是store:storeVuex,它的值是storeVuex,但是key不能变，key一定是store;只有当key和value是一样的时候才可以省略
    data:{ // 7、紧接着我们需要有个data，data是用来装我们的状态的，也就是我们页面里面需要使用的一些变量
           // 我们称之为状态
      msg:"Vuex的使用"
    },
    components:{ // 20、 紧接着我们counter给注册下，注册进去以后它也具备了Vuex的作用
      counter
    }
  })
</script>
</body>
</html>

通过mutations提交改变state的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vuex - Mutations</title>
  <script src="../../node_modules/vue/dist/vue.js"></script>
  <script src="../../node_modules/vuex/dist/vuex.min.js"></script>
</head>
<body>
<!--
  1、  现在我们再来看一下如何提交state
  2、  store和data里面不能同时定义同一个变量，这样会引起冲突的
  3、  我们通过前面知道状态的值只能通过mutations来改变，不能通过其他的手段进行改变
-->
<div id="app">
  <h2>{{ msg }}</h2>
  <!--
   6、 接着我们添加一个按钮来去触发
  -->
  <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
    },
    // 4、 这里我们写一个mutations，这个是改变状态唯一的途径，也是在学习Vuex的时候必须要掌握的知识
    mutations:{
      // 5、 我们在mutations里面定义一个方法
      increment(state){
        state.count++;
      }
    }
  });
  new Vue({
    el:"#app",
    store,
    data:{
      msg:"Vuex的使用"
    },
    components:{
      counter
    },
    methods:{
      // 7、 我们需要在methods里面定义一个add方法，当我们点击上面的a标签的时候它就会触发add函数
      add(){
        // 8、 通过commit来触发
        // 一定要通过this.$store来获取Vuex的对象，来调用commit方法来提交
        this.$store.commit('increment');
      }
    }
  })
</script>
</body>
</html>

mutations内方法传参

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vuex - Mutations</title>
  <script src="../../node_modules/vue/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:{
      // 1、 mutations里面的方法传参,我们接收一个参数比方说叫num,我们直接把count改成num
      increment(state,num){
        state.count = num;
      }
    }
  });
  new Vue({
    el:"#app",
    store,
    data:{
      msg:"Vuex的使用"
    },
    components:{
      counter
    },
    methods:{
      add(){
        // 这里我们传一个值,点击传一个100
        this.$store.commit('increment',100);
      }
    }
  })
</script>
</body>
</html>

组件里面用到多个值

需求：点击好用户名变成100，用户名变成MyYun

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vuex - Mutations</title>
  <script src="../../node_modules/vue/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的参数
      name(){
        return this.$store.state.name;
      }
    }
  };
  const store = new Vuex.Store({
    state:{
      count:10,
      // 我们需要先在Vuex里面先添加这个属性
      name: 'jack'
    },
    mutations:{
      increment(state,num){
        state.count = num;
      },
      // 一般我们在state里面写完值时,mutations里面配套的方法都写完
      updateName(state,userName){
        state.name = userName;
      }
    }
  });
  new Vue({
    el:"#app",
    store,
    data:{
      msg:"Vuex的使用"
    },
    components:{
      counter
    },
    methods:{
      add(){
        // 只要是mutations一定是通过this.$store.commit方法提交
        this.$store.commit('increment',100);
        this.$store.commit('updateName','MaYun');
      }
    }
  })
</script>
</body>
</html>

下面我们来看一下Action怎么使用

1、Action是用来提交mutation，2、它是异步的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vuex - Action</title>
  <script src="../../node_modules/vue/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: 'jack'
    },
    mutations:{
      increment(state,num){
        state.count = num;
      },
      updateName(state,userName){
        state.name = userName;
      }
    },
    // action是用来提交mutation的
    actions:{
      // actions里面的方法有个context参数,它是一个上下文的对象,context可以提交我们的mutation
      // 与mutation一样，它也可以接受参数,如num
      // 与mutation一样，它也需要用户去触发
      incrementAction(context,num){
        context.commit("increment",num);
      }
    }
  });
  new Vue({
    el:"#app",
    store,
    data:{
      msg:"Vuex的使用"
    },
    components:{
      counter
    },
    methods:{
      add(){
        // 触发Action的方法需要使用 this.$store.dispatch 方法
        this.$store.dispatch("incrementAction",5);
      }
    }
  })
</script>
</body>
</html>

我们再来看看getters的用法

它实际上是一个辅助性的东西;通常业务逻辑中确实有些值，但是拿到了需要做一些处理，

处理也就是在它的属性上进行延伸的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vuex - Action</title>
  <script src="../../node_modules/vue/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>用户名:{{ userName }}</div>
      </div>
    `,
    computed:{
      count(){
        return this.$store.state.count;
      },
      name(){
        return this.$store.state.name;
      },
      // 紧接着我们也需要在computed里面定义一个userName
      userName(){
        // 在返回 this.$store.getters.userName;
        return this.$store.getters.userName;
      }
    }
  };
  const store = new Vuex.Store({
    state:{
      count:10,
      name: 'jack'
    },
    getters:{
      // 它类似于计算属性，例如我们定义一个userName
      // 它有个state参数,通过state可以拿到我们的name属性,拿到name之后我们给它拼一个值上去
      // getters只是在某些地方被使用，而不是在mutations里面被重新定义
      userName(state){
        return state.name + ',Hello';
      }
    },
    mutations:{
      increment(state,num){
        state.count = num;
      },
      updateName(state,userName){
        state.name = userName;
      }
    },
    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>