1.1 vuex的核心概念

1. State （驱动应用的数据源）
2. Mutation （以声明方式将 state 映射到视图）
3. Action（响应在 view 上的用户输入导致的状态变化）
4. Getter （对 Store 中的数据进行加工处理形成新的数据）

1.1.1 Start

start 提供唯一的公共数据源，所以共享的数据要统一放到Store 的 Stare 中进行存储。

// 创建 store 数据源， 提供唯一公共数据
const store = new Vuex.store({
    state: {
        name : 'code'
    }
})

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

this.$store.state.name // code

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

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

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

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

1.1.2 Mutation

Mutation 用于变更store中的数据

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

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

// 定义 Mutation
const store = new Vuex.Store({
    state: {
        name: 'code'
    },
    mutations:{
          // 不带参 修改
        changeName(state){
            state.name = 'Vuex'
        }，
        // 带参 修改
        changeNameParameter(state, newName){
            state.name = newName
        }
    }
})
// 触发 Mutation 的 第一种方式
methods: {
    commitMuation () {
        // 不带参
        this.$store.commit('changeName')
        // 带参
      	this.$store.commit('changeNameParameter', 'Vuex')
    }
}
// 触发 Mutation 的 第二种方式
// 1.从vuex中按需导入 mapMutations函数
import { mapMutations } from 'vuex'
methods: {
    // 2.讲指定的 mutations 函数，映射为当前组件的methods 函数
    ...mapMutations(['changeName','changeNameParameter'])
      commitMuation () {
        // 不带参
        this.changeName()
        // 带参
        this.changeNameParameter('vuex')
    }
}

1.1.3 Action

Action 用于 处理异步任务

如果通过异步操作变更数据 （例如定时器，三秒后数据变更）, 必须通过 Action, 而不能使用Mutation，但是在 Action中 还是要通过触发 Mutation 的方式间接变更数据。

// 定义Action
const store = new Vuex.store({
    // ...省略其他代码
    mutations: {
        changeName(state) {
            state.name = 'vuex'
        }
    },
    actions: {
        // 不带参
        changeNameAsync(context){
            setTimeout(() => {
                context.commit('changeName')
            },1000)
        },
        // 带参
        changeNameParameterAsync(context, step) {
            setTimeout(() => {
                context.commit('changeName', step)
            }, 1000)
        }
    }
})
// 触发 Action
 // 触发 actions 的 第一种方式
methods: {
    asyncChangeName() {
        this.$store.dispatch('changeNameAsync')
    }
}
 // 触发 actions 的 第二种方式
 // 1.从vuex中按需导入 mapActions 函数
import { mapActions } from 'vuex'
methods: {
    // 将需要的 actions 函数， 映射为当前组件的 methods 方法
    ...mapActions(['changeNameParameterAsync'])
    asyncChangeNameParameter() {
        this.changeNameParameterAsync('asyncvuex')
    }
}

1.1.4 Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据，类似于Vue 的计算属性(computed)

Store 中的数据发生变化，Getter的数据也会发生变化

// 定义 Getter
const store = new Vuex.Store({
    state: {
        name: 'vuex'
    },
    // mutations
    // actions
    getters: {
        beautifulName: state => {
            return '这是我的新名字' + state.name + '好看不？'
        }
    }
})
// 触发Getter
// 使用getters的第一种方式
this.$store.getters.beautifulName
// 使用getters的第二种方式
import { mapGetter } from 'vuex'

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

小结：

Vuex 可以帮助我们管理共享状态。如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。