Vue中UI组件库之Vuex与虚拟服务器初识(7)

日期：2020-05-11 栏目：程序人生浏览：次

App.vue

<template>
 <div>
 <h1>全局仓库state对象的a：{{$store.state.a}}</h1>
 <button @click="add()">+</button>
 <button @click="minus()">-</button>
 <button @click="add(2)">+</button>
 <input type="text" ref="txt">
 <button @click="addUser()">加用户输入的数</button>
 </div>
</template>
<script>
export default {
 methods:{
 add(n=1){
  // this.$store.state.a++ //不允许直接改全局的state数据
  // this.$store.commit("JIA", 8);
  this.$store.commit("JIA", {n});
 },
 minus(){
  this.$store.commit("MINUS", {n : 10});
 },
 addUser(){
  this.$store.commit("JIA", {n : Number(this.$refs.txt.value)});
 }
 }
};
</script>

记住一条重要的原则：mutations必须是同步函数

4.4 actions

上面说过mutation 中不能写异步语句，为了处理异步操作，我们来看一看action

action 类似于 mutation，不同在于：

action 提交的是 mutation，而不是直接变更状态。

action 可以包含任意异步操作。

action 要通过 store.dispatch() 方法触发

注意：涉及到异步Ajax请求数据，案例必须运行在服务器端（127.0.0.1）

新建一个data文件夹，创建txt文件。使用ajax 异步读取文本文件中数据：

App.vue父组件：

<script>
 export default {
 methods:{
  add(){
  this.$store.dispatch("JIA");
  }
 }
 }
</script>

main.js

const store = new Vuex.Store({
 state : {
 a : 100
 },
 mutations : {
 JIA(state,payload){
  console.log("只有commit命令能触发我")
  state.a += payload.n
 }
 },
 actions : {
 async JIA({commit}){
  // console.log("只有dispatch命令能触发我，这里可以写异步语句")
  var data = await fetch('../data/1.txt').then(data=>data.json())
  //action提交的是mutation，而不是直接更改状态，
  //请求成功返回的数据需要通过commit命令mutations去修改state中的数据
　　　　　　　// context.commit("JIA", {n: data})
  // this.commit("JIA", {n: data})
  commit("JIA", {n:data})
 }
 },
 plugins: [createLogger()]
})

actions中的函数，天生自带默认参数

一些概念：

action 函数接受一个与store实例具有相同方法和属性context对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

实践中，会经常用到ES2015的参数解构来简化代码（特别是我们需要调用commit很多次的时候）：

actions:{
 async JIA({commit}){
 var data = await fetch("../data/1.txt").then(data=>data.json());
 commit("JIA",data)
 }
},

转载注明出处：http://www.heiqu.com/384.html

Vue中UI组件库之Vuex与虚拟服务器初识(7)

相关推荐