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

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

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

methods:{
 add(){
 this.$store.dispatch("JIA")
 }
}

乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：

actions支持同样的载荷方式和对象方式进行分发：

vuex单向数据流动的图示：

使用 Vuex 并不意味着你需要将所有的状态放入Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

4.5 getters

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

computed: {
 arr() {
 return this.$store.state.todos.filter(todo => todo.done).length
 }
}

在Vuex中，getter类似于组件中的computed，表示state的一些计算后的值。

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像computed计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 接受 state 作为其第一个参数：

main.js

import Vue from 'vue';
import Vuex from 'vuex'; //引入Vuex包
import App from './App.vue';
import createLogger from 'vuex/dist/logger'; //调试工具

Vue.use(Vuex); //将Vuex安装到全局

//创建一个仓库，并且存放以一些全局数据（存放四大选项）
const store = new Vuex.Store({
 state:{
 a:100,
 students:[
  {name:"小明",sex:"男"},
  {name:"小红",sex:"女"},
  {name:"小刚",sex:"男"},
  {name:"小花",sex:"女"},
  {name:"小黑",sex:"男"}
 ]
 },
 getters:{
 //得到所有男生
 nan(state){
  return state.students.filter((item)=>{
  return item.sex == '男';
  })
 },
 //得到所有女生
 nv(state){
  return state.students.filter((item)=>{
  return item.sex == '女';
  })
 },
 //得到男生和女生的个数，getter也可以接受getter作为第二个参数
 nanCount(state,getters){
  return getters.nan.length;
 },
 nvCount(state,getters){
  return getters.nv.length;
 }
 },
 plugins: [createLogger()]
})

new Vue({
 el:"#app",
 store, //将store注入到全局
 render:(h)=> h(App)
})

App.vue父组件：

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

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

相关推荐