Vuex基本使用

1.Vuex应用场景：

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

2.Vuex安装

npm install vuex -D       //安装

import Vuex from 'vuex'  //引用
Vue.use(Vuex)

const store = new Vuex.Store({
 state: { count: 0 }         // 创建一个Store对象，里面有一个全局共享对象       
})

new Vue({
 el: '#app',
 render: h => h(app),
 router,
 store                      //挂载到 Vue 实例中
})

3.Vuex核心概念之State属性

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

　　2.Vuex使用单一状态树，即用一个对象就包含了全部的状态数据。state作为构造器选项，定义了所有我们需要的基本状态参数。

 //创建store数据源，提供唯一公共数据

 const store = new Vuex.Store({
 　　state: { count: 0 }
 })


//组件访问 State 中数据的第一种方式

this.$store.state.count


//组件访问 State 中数据的第二种方式：

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

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

4.Vuex核心概念之Mutation属性

　　1.只能通过 mutation 修改 Store 数据，不可以直接操作 Store 中的数据。

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

　　3.mutation 属性中只能定义同步方法

//定义mutations
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add(state) {    //无参
            state.count++ //更新count值
        },
        addN(state, val) //有参
        {
            state.count += val //更新count值
        }
    }
})


//触发mutations 的第一种方式

methods: {
    handle1() {
        this.$store.commit('add')    //无参调用
    },
    handle2(val) {
        this.$store.commit('addN', val) //有参调用
    }
}

//触发mutations 的第二种方式

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

methods: {
    ...mapMutations(['add', 'addN'])//将指定的 mutations 函数，映射为当前组件的 methods 函数
}

5.Vuex核心概念之Action属性

　　1.Action中可以定义任意异步操作

　　2.由于Mutation中只能定义同步方法，如果需要执行异步操作，则需要用Action包裹一层后执行

//定义 Action
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add(state) {
            state.count++
        },
        addN(state, val) {
            state.count += val
        }
    },
    actions: {
        addAsync(context) {
            setTimeout(() => {
                context.commit('add')    //无参调用
            }, 1000)
        },
        addNAsync(context,val) {
            setTimeout(() => {
                context.commit('addN', val) //有参调用
            }, 1000)
        },
    }
})


//触发 actions 的第一种方式

methods: {
    handle() {
        this.$store.dispatch('addAsync')
    }
}

//触发 actions 的第二种方式

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

methods: {                                  
    ...mapActions(['addASync', 'addNASync']) //将指定的 actions 函数，映射为当前组件的 methods 函数
}

6.Vuex核心概念之Getter属性

　　1.Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。

　　2.Store 中数据发生变化，Getter 的数据也会跟着变化。

//定义 Getter
const store = new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        showCount: state => {
            return '值为：【' + state.count + '】'
        }
    }

})


//使用 getters 的第一种方式

methods: {
    handle() {
        this.$store.getters.showCount
    }
}

//使用 getters 的第二种方式

import { mapGetters } from 'vuex'          //从 vuex 中按需导入 mapGetters 函数

computed: {
    ...mapGetters(['showCount'])           //映射为计算属性
}

7.Vuex核心概念之Modules属性

　　1.由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

　　2.为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态