VueX

Vuex学习

1.vuex环境搭建

1.1.安装vuex依赖包

npm install vuex --save

1.2.导入vuex包

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

1.3.创建store对象

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

1.4.将store对象挂载到vue实例中

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

2.Vuex核心概念

2.1.State的使用

定义：State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储

// 创建Store数据源，提供唯一公共数据
const store = new Vuex.Stroe({
    state:{
        count: 0
    }
})

2.1.1.组件访问State中数据的第1种方式（一般不用这种）

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

2.1.2.组件访问State中数据的第2种方式

// 1.从vuex中按需导入mapState函数
import { mapState } from 'vuex'

通过刚刚导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性

// 2.将全局数据，映射为当前组件的计算属性
computed: {
    ...mapState(['count'])
}

// 3.使用
<h3>{{ count }}</h3>

2.2.Mutation的使用

定义：Mutation用于变更Store中的数据

• 只能通过mutation变更Store数据，不可以直接操作Store中的数据

• 通过这种方式虽然操作起来稍微繁琐一点，但是可以集中监控所有数据的变化

// 定义Mutation
const store = new Vuex.Stroe({
    state: {
        count: 0
    },
    mutations: {
        add(state){
            // 变更状态
            state.count++
        }
    }
})

2.2.1.触发mutations的第1种方式

// 触发mutation
methods: {
    add(){
        // 触发mutations的第一种方式
        this.$store.commit('add')
    }
}

触发mutations时传递参数

// 定义Mutation
const store = new Vuex.Stroe({
    state: {
        count: 0
    },
    mutations: {
        addN(state, step){
            // 变更状态
            state.count += step
        }
    }
    
// 调用
this.$store.commit('addN', 3)

2.2.2.触发mutations的第2种方式

// 1.从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex'

通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法

// 2.将指定的mutations函数，映射为当前组件的methods函数
methods: {
    // 先定义
    ...mapMutations({'add', 'addN'})
    handler1(){
        // 在需调用mapMutations数组中定义的函数
        this.add()
    }
    handler2(){
        // 按需调用mapMutations数组中定义的函数
        this.addN()
    }
}

// 3.使用
<h3>{{ add }}</h3>
<h3>{{ addN }}</h3>

注意：不要在Mutations函数中，执行异步操作，执行异步操作必须在Action中

2.3.Action的使用

定义：Action用于处理异步的任务，如果通过异步操作变更数据，必须通过Action，而不能使用Mutation（例如定时器），但是在Action中还是要通过触发Mutation的方式间接变更数据

const store = new Vuex.Stroe({
// ...省略其它代码
mutations: {
    add(state) {
        state.count++
    }
},
actions: {
    addAsync(context){
        setTimeout(() => {
            context.commit('add') // 这边的add就是上面mutations中定义的add
        }, 1000)
    }
}

2.3.1.触发Action的第一种方式

methods: {
    handler(){
    	// 触发actions的第一种方式
    	this.$store.dispatch('addAsync')
	}
}

2.3.2.触发Action的第二种方式

// 1.从vuex中按需导入mapActions函数
import { mapActions } from 'vuex'

通过刚才导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法:

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

// 2.使用
<h3>{{ addAsync }}</h3> 
<h3>{{ addNASync }}</h3>

2.4.Getter的使用

定义：Getter用于对Store中的数据进行加工处理形成新的数据

• Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性
• Store中数据发生变化，Getter的数据也会跟着变化

// 定义Getter
const store = new Vuex.Stroe({
    state: {
        count: 0
    },
	getters:
    showNum(state) {
        return '当前最新的数量是【'+ state.count +'】'
    }

2.4.1.使用getter的第一种方式

this.$store.getters.showNum

2.4.2.使用getter的第二种方式

import { mapGetters } from 'vuex'

computed: {
    ...mapGetters(['showNum'])
}

<!-- 使用 -->
<h3>{{ showNum }}</h3>