Vuex

Vuex

Vuex概述

实现组件全局状态(数据)管理的一种机制,可以方便进行组件之间的数据共享

• 集中管理数据，易于开发维护
• 高效地实现组件间数据共享，提高开发效率
• 数据是响应式的，能够实现数据实时自动同步

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中，对于组件的私有数据，存储到自身的data中即可

Vuex基本使用

1. 安装Vuex依赖包

   npm install vuex --save
   

2. 导入Vuex包

   import Vuex from 'vuex'
   Vue.use(Vuex)
   

3. 创建store对象

   const store = new Vuex.store({
       //  state中存放全局共享数据
       state: { count: 0 }
   })
   

4. 挂载store对象挂载到vue实例中

   new Vue({
       el: '#app',
       render: h => h(app),
       router,
       //  将创建的共享数据对象,挂载到Vue实例中
       //  所有的组件，就可以直接从store中获取全局的数据
       store
   })
   

脚手架初始化的vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

核心概念

• State提供唯一的公共数据源，所有共享的数据都统一放到store中的state中存储
• Mutation用于变更stroe中的数据
• Action 用于处理异步操作
• Getter用于对stroe中的数据进行加工处理形成新的数据

组件访问state数据的第一种方式

this.$store.state.全局数据名称

store\index.js

export default new Vuex.Store({
  state: {
    count: 100
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

components\Add.vue

<template>
    <div>
        <h2>最新值count为{{$store.state.count}}</h2>
        <button>+1</button>
    </div>
</template>

组件访问state数据的第二种方式

从vuex中按需导入mapstate函数

import {mapState} from 'vuex'

将全局数据，映射为当前组件的计算属性

computed: {
	...mapState({['count']})
}

components\Sub.vue

<template>
    <div>
        <h2>最新值count为{{count}}</h2>
        <button>-1</button>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

Mutation用于变更stroe中的数据

• 只能通过mutation变更数据，不可以直接操作store中的数据
• 可以集中监控所有数据变化

只有mutation中定义的函数，才修改state中的数据

定义mutation

mutations: {
	add(state) {
	//变更状态
	state.count++
	}
}

触发mutations的第一种方法

commit的作用就是调用mutation中的函数

handle(){
	this.$store.commit('add')
}

store\index.js

定义addN函数,实现传参

addN (state, step) {
      // 让state中的count加step
      state.count += step
    }

触发mutations的第二种方法

moutation中不能执行异步操作
按需导入mapMutations
将需要的mutations函数映射为当前组件的methods方法

	methods: {
	...mapMutations(['sub','addN']),
	   handle() {
	   this.sub(3)
	   }
	}

延时处理,延时一秒后处理

Action 用于处理异步操作

异步操作需要放到action中定义

moutation中不能执行异步操作，要异步操作变更数据，必须通过action，而不能使用mutation，但是在action中还是要通过触发mutation的方式间接改变数据

实例

定义action异步操作

actions: {
    addAsync (conten) {
      //  actions中,不能直接修改state的数据
      //  必须通过context.commit()触发某个mutation
      setTimeout(() => {
        conten.commit('add')
      }, 1000)
    }
  }

触发ation的第一种方式

$store.dispatch()

实例

触发action异步操作,在组件methods中定义

btnhander3 () {
      //  dispatch 专门用于触发某个action
      this.$store.dispatch('addAsync')
    }

携带参数

addNAsync (content, N) {
      setTimeout(() => {
        content.commit('addN', N)
      }, 1000)
    }

btnhander4 () {
      this.$store.dispatch('addNAsync', 3)
    }

触发ation的第二种方式

导入mapActions函数，将需要的函数，映射为当前组件的methods方法

1. 从Vuex中按需导入mapActions函数

   import { mapActions } from `vuex`
   

2. 通过导入的mapActions函数,将需要的action函数,映射为当前组件的methods方法

   methods: {
       ...mapActions(['addAsync', 'addNAsync'])
   }
   

实例

subAsync (content) {
      setTimeout(() => {
        content.commit('sub')
      }, 1000)
    }

使用

...mapActions(['addAsync', 'addNASync'])

Getter用于对stroe中的数据进行加工处理形成新的数据

加工处理形成新的数据,不修改stroe中的原始数据,类似于计算属性

store中的数据发生变化,getter的数据也会变化

定义getters

const store = new Vuex.store({
    state: { count: 0 },
    getters: {
        showNUM: state => {
            return state.count
        }
    }
})

使用getter的第一种方法

this.$store.getters.名称

使用getter的第二种方法

mapGetters函数

映射为组件的计算属性

...maoGetters(['showNum'])

案例TODOS

创建项目

安装依赖

axios运行依赖

ant-design-vue运行依赖

列表数据动态加载

在main.js中导入store

import store from './store/index'

在store\index.js中发送数据请求

actions: {
    // 发起请求
    getList (context) {
      axios.get('/list.json').then(({ data }) => {
        console.log(data)
      })
    }
  }

在mutation中为list重新赋值

mutation中的任何函数第一个参数都state,之后的为需要接受的参数

mutations: {
    initlist (state, list) {
      state.list = list
    }
  }

在页面中使用获取到的数据

import { mapState } from 'vuex'

computed: {
    // 将list作为计算属性引入
    ...mapState(['list'])
  }

文本框内容双向同步

属性绑定,将inputValue中的值设置为页面的计算属性,并绑定到文本框中

通过input的change事件处理函数,将变化后的值通过mutation中定义的方法来赋值回去

setInputValue (state, val) {
      state.inputValue = val
    }

事件处理函数

handeInputChange (e) {
      // 监听文本框变化
      this.$store.commit('setInputValue', e.target.value)
    }

点击添加事项

为按钮绑定单击事件处理函数

首先通过计算属性判断用户输入的文本是否为空,

不为空就调用addItem方法

addItem (state) {
      const obj = {
        id: state.nextId,
        info: state.inputValue.trim(),
        done: 'false'
      }
      // 追加到list
      state.list.push(obj)
      // id自增
      state.nextId++
      // 情况文本框
      state.inputValue = ''
    }

删除项目

首先为删除按钮绑定单击事件

然后通过id传参,将对于id的项目删除

复选框状态绑定

list数据中包含info表示项目是否完成,通过此属性来获取状态

<!-- 复选框 -->
        <a-checkbox :checked="item.done">{{item.info}}</a-checkbox>

修改任务完成状态

监听复选框事件变化