网站建设制作深圳营销软文推广平台

Promise

Promise是异步编程的一种解决方案。

最常见的异步场景就是网络请求了。

语法：

new Promise((resolve,reject)=>(//异步请求操作)).then(()=>{//	成功时的数据操作}).catch(()=>{//失败时的数据操作
})

异步操作之后会有三种状态：

1. pending：等待状态，比如正在进行网络请求，或者定时器没有到时间
2. fulfill：满足状态，当主动回调了resolve时，就处于该状态，并且会回调.then( )
3. reject：拒绝状态，当主动回调了reject时，就处于该状态，并且会回调.catch( )

Promise的all方法

当程序中同时发送多个网络请求，只能当多个网络请求的结果都接收成功时才正在处理好结果，该怎么办？

Promise中有个all方法，可以同时处理多个异步操作。
Promise.all([])中间是个数组

Promise.all([new Promise((resolve, reject) => {setTimeout(() => {resolve('result1')}, 1000)}),new Promise((resolve, reject) => {setTimeout(() => {resolve('result2')}, 3000)}),]).then(result => {console.log(result);})

Vuex

vuex是一个专门为Vue.js应用程序开发的状态管理模式。

状态管理是什么？
简单的来看就是多个组件之间共享变量全部存储在一个对象里面，然后将这个对象放在顶层的Vue实例中，让其他组件可以使用，那么多个组件就共享这个对象中的所有变量属性了。

并且该状态管理是响应式的。

但是什么状态需要在多个组件间共享呢？

• 比如用户的登录状态、用户名称、头像、地理位置信息等等
• 比如商品的收藏、购物车中的物品等等

state属性

在多页面中使用vuex，使用脚手架创建带有vuex插件的文件夹
在主文件夹下有个store文件夹，有个main.js文件

//main.js
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {counter:1000  //设置一个属性为counter},mutations: {},actions: {},modules: {}
})

在App.vue文件中使用conuter

<template><div id="app"><h2>{{$store.state.counter}}</h2></div>
</template>

mutations属性

此时想要修改App.vue文件中的conuter值，应该如何修改？

方法一：直接通过设置点击事件，修改$store.state.counter的值

<template><div id="app"><h2>{{$store.state.counter}}</h2><button @click="$store.state.counter++}">+</button><button @click="$store.state.counter--}">-</button></div>
</template>

这种方法可以进行修改值，但是该方法是官方不推荐的

1. 如果有多个页面同时用到该状态，如果其中一个页面对其进行修改，并且出错了，此时就无法查明到究竟是哪个页面进行了修改
2. 数据的修改无法做到响应式，如果对数据进行修改，页面的数据修改，并不会影响到真实存在于后台的数据，无法同步。

方法二：mutations属性

在index.js文件夹中，将mutation属性中加入两个属性

//store-index.js
new Vuex.Store({state: {counter:1000},mutations: {add(state){state.counter++},sub(state){state.counter--}}

在App.vue中设置两个点击事件方法

//App.vue
<template><div id="app"><h2>{{$store.state.counter}}</h2><button @click="addcounter">+</button><button @click="subounter">-</button></div>
</template><script>
export default {name: "App",methods:{addcounter(){this.$store.commit('add')},subounter(){this.$store.commit('sub')}}
};
</script>

这就是官方推荐的方法。

同时在浏览器安装一个devtools插件，可以对整个点击过程进行调试。

这就是使用vuex最简单的方式了

现在，对上述的步骤进行小节

1. 提取出一个公共的store对象，用于保存在多个组件中共享的状态
2. 将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到
3. 在其他组件中使用store对象中保存的状态即可
   （通过this.$store.state属性的方法来访问状态，通过this. $store.commit(‘mutation中的方法’)属性的方法来修改状态）

Getters基本使用

getters可以用来处理一些state中的数据

现在有这样的需求，state中有对象，取出Fmvp大于0的对象并展示出来

new Vuex.Store({state: {people:[{id:1,name:'张岳',age:36,fmvp:4},{id:2,name:"张三",age:30,fmvp:0},{id:3,name:"李四",age:38,fmvp:2},{id:4,name:"王八",age:20,fmvp:0},],}

此时就在getters属性中加入筛选函数：

getters:{ hasFmvps(state){return state.people.filter(p => p.fmvp>0)},hasFmvpsLength(state,getters){return getters.hasFmvps.length}

其中filter(( )=>{ })，会遍历数组，然后将符合条件的数组放入到新的数组中

在App.vue中：

<template><div id="app"><h2>拥有Fmvp的人</h2><h3>{{$store.getters.hasFmvps}}</h3><h3>{{$store.getters.hasFmvpsLength}}</h3></div>
</template>

Mutation属性

Vuex的store状态的唯一更新方式：提交Mutation

Mutation主要包括两部分：

• 字符串的时间类型（type）
• 一个回调函数（handler），该回调函数的第一个参数就是state

在通过mutation更新数据的时候，有可能会希望携带一些额外的参数

• 这种参数被称为是mutation的载荷（payload）

在上述的conunter案例中，加入一个+5，+10的按钮

//App.vue
<template><div id="app"><h2>{{$store.state.counter}}</h2><button @click="addcounter">+</button><button @click="subounter">-</button><button @click="addcount(5)">+5</button><button @click="addcount(10)">+10</button>
</template><script>
export default {name: "App",methods:{addcounter(){this.$store.commit('add')},subounter(){this.$store.commit('sub')},addcount(count){this.$store.commit('addcount',count)},}
};
</script>

//index.js
mutations: {add(state){state.counter++},sub(state){state.counter--},addcount(state,count){state.counter += count}},

Action属性

通常情况下，Vuex要求Mutation中的方法必须是同步方法，主要的原因是当使用devtool时，devtools可以捕捉mutation的快照，但是如果是异步操作，那么devtools将不能很好的追踪这个操作是什么时候被完成的

例如：

export default new Vuex.Store({state: {counter:1000,},mutations: {add(state){setTimeout(()=>{state.counter++},1000)}
})

所以当有异步操作时，就不要再使用mutation，而有时候必须要使用一些异步操作，该怎么办？

Action类似于Mutation，但是是用来代替Mutation进行异步操作的。

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {counter:1000,},mutations: {add(state){state.counter++},},actions: {action_add(context){  //context上下文，相当于store实例对象setTimeout(()=>{context.commit("add")},1000)}},
})

在App.vue进行修改

  methods:{addcounter(){this.$store.dispatch("action_add")},

Modules属性

Modules是模块的意思，为什么在Vuex中使用模块呢？

• Vue使用单一状态树（也就是一个项目中只有一个store），那么也意味着很多状态都会交给Vuex来管理
• 当应用变得非常复杂时，store对象就有可能变得相当臃肿

为了解决这个问题，Vuex允许将store分割成（Module），而每个模块拥有自己的state、mutations、action、getters等

const modulesA = {state:{...},mutations:{...},actions:{...},getters:{...},
}const modulesB = {state:{...},mutations:{...},actions:{...},getters:{...},
}const modules = {state:{...},mutations:{...},actions:{...},getters:{...},modules:{a:modulesA,b:modulesB}
}

如何在其他页面使用？

在modulesA中设置一个name属性

const modulesA = {state:{name:"张三"},mutations:{...},actions:{...},getters:{...},
}

在App.vue中使用

<h1>{{$store.state.a.name}}</h1>

修改modulesA中的name为李四

//index.js
const modulesA = {state:{name : "张三"},mutations:{updatename(state){state.name="李四"}}
}

//App.vue<h1>{{$store.state.a.name}}</h1><button @click="updatea">修改名字</button>methods:{updatea(){this.$store.commit("updatename")}
}