vuex的使用与总结

 定义

1、vuex全局状态管理器；

2、实现组件之间跨层传递数据，实现数据与视图响应式更新

使用vuex的步骤

1、安装Vuex

npm install vuex --save

2、引入Vuex

 在src下创建store/store.js,写入以下代码：

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

3、创建仓库Store

每一个 Vuex 应用的核心就是 store（仓库）,store就是一个容器

//创建一个store
const store = new Vuex.Store({
    state: {},
    getters:{},
    mutations:{},
    action:{},
    module:{}
});
//导出
export default store 

核心概念与用法

1、state 状态数据，存储vuex的基本数据

用法： this.$store.state.xxx

         ...mapState([xxx,yyy])

         相当于vue里面的data

2、getters 获取，列如：对数值进行奇偶数判断

用法： this.$store.getters.xxx

         ...mapGetters([xxx,yyy])

         相当于vue里面的computed

3、mutations 方法  不能直接改变store中的状态，只能通过mutations方法

用法： this.$store.commit.xxx

         ...mapMutations([xxx,yyy])

         相当于vue里面的methods

4、actions 动作  不能直接更改state中的数据状态

用法： this.$store.dispatch.xxx

         ...mapActions ([xxx,yyy])

         相当于vue里面的methods（异步）

5、modules 模块化管理vuex，实现项目中拆分的每一个功能模块都有各自的state、getter、mutations、actions

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

import moduleA from './store/module/moduleA'
import moduleB from './store/module/moduleB'

Vue.use(vuex)

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    modules: {
        moduleA,
        moduleB
    }

}) 

moduleA.js / moduleB.js 文件

// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}

然后在组建中这样调用就可以

<template>
    <div>
        <h2>{{getText1}}</h2>
        <h2>{{getText2}}</h2>
    </div>
</template>

computed:{
    getText1(){
        return this.$store.state.moduleA.text
    },
    //或
    ...mapState({
        getText2:state => state.moduleB.text
    })
}