Vuex状态管理入门Demo

其他 2018-07-23 00:09:31 阅读次数: 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">
  <!--
   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>

猜你喜欢

转载自blog.csdn.net/xyphf/article/details/80731897
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022