Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

  • 状态,驱动应用的数据源;

  • 视图,以声明方式将状态映射到视图;

  • 操作,响应在视图上的用户输入导致的状态变化。
    请添加图片描述
    但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

  • 多个视图依赖于同一状态。

  • 来自不同视图的行为需要变更同一状态。
    请添加图片描述

Vuex可以适用于多个组件之间共享数据

安装Vuex

npm install vuex@next --save

搭建Vuex环境:

创建文件src/store/inde.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

在入口文件mian.js添加配置项:

......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

state:初始化存储数据

getters:Vuex 允许我们在 store 中定义“getters”(可以认为是 store 的计算属性)。

mutation:唯一更改state数据状态的方法就是提交mutation,并且它会接受 state 作为第一个参数。

action :action 提交的是 mutation,而不是直接变更状态,并且action 可以进行异步操作。

组件中进行读取数据:$store.state.data

组件中修改vuex中的数据:$store.dispatch('action中的方法名',data)

map方法

mapState:将state中的数据映射为计算属性。

computed: {
    //借助mapState生成计算属性:sum、school、subject(对象写法)
     ...mapState({sum:'sum',school:'school'}),
         
    //借助mapState生成计算属性:sum、school、subject(数组写法)
    ...mapState(['sum','school']),
},

mapGetters:将getters中的数据映射为计算属性。

computed: {
    //借助mapGetters生成计算属性:getSum(对象写法)
    ...mapGetters({getSum:'getSum'}),

    //借助mapGetters生成计算属性:getSum(数组写法)
    ...mapGetters(['getSum'])
},

mapAction:将action中的数据映射为计算属性。

methods:{
    //靠mapActions生成:incrementOdd、incrementWait(对象形式)
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成:incrementOdd、incrementWait(数组形式)
    ...mapActions(['jiaOdd','jiaWait'])
}

mapMutation:将mutation中的数据映射为计算属性。

methods:{
    //靠mapActions生成:increment、decrement(对象形式)
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成:JIA、JIAN(对象形式)
    ...mapMutations(['JIA','JIAN']),
}
Logo

前往低代码交流专区

更多推荐