一、vuex基本使用

1. 安装

npm i vuex -S

2. 导入 并 使用到项目中

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

3. 创建 store 对象

const store = new Vuex.Store({
 state:{ count = 0 } // state 对象里面的就是全局共享数据,如这里的 count
})

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

new Vue({
  el: '#app'
  render: h => h(app)
  router
  store  // 此时，所有 vue 项目中的组件均可共享 store 中的数据
})

二、在 vue-cli 创建的 vue 项目中讲解 vuex 的使用

1. 创建后的项目目录简述

store 文件夹里的 index.js 文件如下（相当于自己创建的 store.js 文件）：

main.js 文件如下：

2. 核心概念讲解

讲解要素：vuex 中主要核心概念：

• State
• Mutations
• Actions
• Getters

另外： 有个 modules 节点 

讲解准备：在项目中先创建 Add.vue 和 Sub.vue 组件，并在 App.vue 中导入使用：

• Add.vue :

• Sub.vue :

• App.vue :

2.1 State 讲解

State 是唯一的公共数据源。所有共享数据都放在 Store/index.js 的 State 中进行存储。

• Store/index.js ：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0 // 共享数据 count
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {}
})

Add.vue 和 Sub.vue 组件中使用共享数据 count。

• 1. 通过 this.$store.state.全局数据名称 方式使用

Add.vue :

注：template 中 this 可以省略

• 2. 通过 mapState 映射函数方式使用

Sub.vue ：

2.2 Mutations 讲解

任何时候都不要直接去修改 State 里面的数据，否则可能会造成不必要的意外，也不利于后期维护。例如：

因此，Mutation 出现了，它用于变更 Store 中的数据。

Store/index.js ：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0 // 共享数据 count
  },
  getters: {},
  mutations: {
    // 定义 add() 方法
    add(state) {
      // 变更状态
      state.count++
    }
  },
  actions: {},
  modules: {}
})

Mutations 里的函数也可以传参：

  mutations: {
    // 第一个参数永远是 state ，第二个参数是传进来的参数
    addN(state，step) {
      state.count += step
    }
  },

• 1. 使用 this.$store.commit() 方式调用方法

App.vue :

使用时候传参：

  methods: {
    add() {
      this.$store.commit('addN',5) // 5 是传参
    }
  }

• 2. 使用 mapMutations 映射方式调用方法

 Sub.vue :

2.3 Actions 讲解

看看下面，我们在 Store/index.js 里的 mutations 里进行异步操作。其实这样是不行的！！

export default new Vuex.Store({
  state: {
    count: 0 // 共享数据 count
  },
  getters: {},
  mutations: {
    addN(state, step) {
      // 不要在 mutations 进行异步操作
      // setTimeout(function () {
      //   state.count += step
      // }, 1000)
    },
    sub(state) {
      state.count--
    }
  },
  actions: {},
  modules: {}
})

 在 vuex 中，如果要通过异步操作变更数据，必须通过 Actions，在 Actions  中触发 Mutations 的方式间接变更数据。

Store/index.js ：

export default new Vuex.Store({
  state: {
    count: 0 // 共享数据 count
  },
  mutations: {
    add(state) {
      state.count++
    },
    addN(state,step) {
      state.count += step
    }
  },
  actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit('add') // 触发 mutations 中的函数
      }, 1000)
    }
  },
})

接收参数：

actions: {
    addAsync(context，step) {  // step 接收组件中传过来的参数
      setTimeout(() => {
        context.commit('addN',step) // step 是将上面的参数传到 mutations 中的函数中
      }, 1000)
    }
  }

• 1. 使用 this.$store.dispatch() 触发 actions 中的函数

App.vue :

传参：

  methods: {
    addAsc() {
      this.$store.dispatch('addAsync',5) // 使用 dispatch 触发 actions 中的函数
    }
  }

• 2. 使用 mapActions 映射方式触发 actions 中的函数

2.4 Getters 讲解

Getters 用于对 Store 中的数据进行加工，形成新的数据，类似于  vue 中的计算属性。

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

Store/index.js ：

  getters: {
    showNum(state) {
      return '当前的值为:' + state.count
    }
  }

• 1. 通过 $store.getters.方法名称 方式使用

Add.vue :

• 2. 通过mapGetters 映射方式使用

2.5 modules 讲解(未）