Vuex状态管理入门Demo

分手后的思念是犯贱 2022-05-22 07:19 220阅读 0赞

### **首先我们介绍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">
      
    	<h2>{
       { msg }}</h2>
      
    	<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>
    
    <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
        },
        // 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>