Vuex入门

一、Vuex简介

1.Vuex是什么

Vuex 是实现组件全局状态(数据)管理的一种机制，可以方便的实现 组件之间数据的共享

2.vuex统一管理的好处

• 能够在 vuex 中 集中管理共享的数据，易于开发和后期维护
• 能够 高效地 实现组件之间的数据共享，提高开发效率
• 存储在 vuex 中的 数据都是响应式 的，能够实时保持数据与页面的同步

3.什么样的数据适合存储到 Vuex 中

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

4.vuex的基本使用

①.安装 vuex 依赖包

npm install vuex --save

②.导入使用

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
复制代码

③.store/store.js中 创建 store 对象

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

④.在main.js上 挂在到vue实例上

// 1. 导入 store 的实例对象
import store from './store/store.js'
// 省略其它代码...
const app = new Vue({
  ...App,
  // 2. 将 store 挂载到 Vue 实例上
  store,
})
app.$mount()
复制代码

二、vuex的核心概念概述

1、State：store数据源，提供唯一公共数据

const store = new Vuex.Store({
    state: { count: 0 }
})
复制代码

组件中访问方式一：

this.$store.state.全局数据名称
复制代码

组件中访问方式二：

1、从 vuex 中按需导入 mapState 函数

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

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

2、Mutation ： 用于变更 Store中的数据。

1. 规范：组件中只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。

2. 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化，不然以后很难找到在哪个组件中修改了store中的数据

// 定义 Mutation
const store = new Vuex.Store({
state: {
    count: 0 
},
mutations: {
  add(state) { // state形参 是默认第一个形参（必须要有的） 
        state.count++ 
        }
    }
})
复制代码

组件中访问方式一：

Mutation 通过 store.commit 方法触发

methods: {
    handle1() {
        this.$store.commit('add')
    }
}
复制代码

传递参数

1.在store.js中定义

// 定义Mutation
const store = new Vuex.Store({
 state: {
      count: 0
     },
 mutations: {
   addByStep(state,step){ // state形参 是默认第一个形参（必须要有的）,第二个是增加步数
       state.count += step
   }
 }
})
复制代码

2.组件中使用

// 使用（触发）mutation
methods: {
   handle() { 
       // 使用commit触发，并携带参数
       this.$store.commit('addByStep',5)
 }
}
复制代码

组件中访问方式二

1、从 vuex 中按需导入 mapMutations 函数

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

import { mapMutations } from 'vuex'
// 1. 将全局数据，映射为当前组件的 methods方法
methods: {
    ...mapMutations(['addByStep'])
}
复制代码

传递参数

直接写入即可: addByStep ( 5 )

3、Action ：用于处理异步任务。

如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，
但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。

// 定义 Action
const store = new Vuex.Store({
 state: {
      count: 0
     },
 mutations: {
    add(state) {
        state.count++
    }
},
 actions: { 
    addAsync(context) { // context 官方运行上下文   获取当前的vuex实例
        setTimeout(() => {
          context.commit('add')
        }, 1000) }
    } 
})
复制代码

组件中访问方式一：

Action 通过 store.dispatch 方法触发

// 触发 Action 
methods: {
    handle() {
        this.$store.dispatch('addAsync')
    } 
}
复制代码

携带参数

1.在store.js中定义

// 定义Acation
const store = new Vuex.Store({
 state: {
      count: 0
     },
 mutations: {
   addByStep(state,step){ 
       state.count += step
   }
 }，
  actions: {
      addStepASync(context,step){ // context 官方运行上下文   获取当前的vuex实例
          setTimeout(()=>{
              context.commit('addByStep',step)
          },1000)
      }
  }
})
复制代码

2.组件中使用

// 使用（触发）Action
methods: {
   handle() { 
       // 使用dispatch触发，并携带参数
       this.$store.dispatch('addStepASync',5)
 }
}
复制代码

组件中访问方式二

1、从 vuex 中按需导入 mapActions 函数

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

import { mapActions } from 'vuex'
//. 将全局数据，映射为当前组件的methods方法 
methods: {
    ...mapMutations(['addASync','addStepASync'])
}
复制代码

传递参数

直接写入即可: addStepASync ( 5 )

4、Getter ：用于对 Store 中的数据进行加工处理形成新的数据。

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

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

// 定义 Getter
const store = new Vuex.Store({
  state: {
    count: 0
}, 
  getters: {
        showNum: state => { // state形参 是默认第一个形参（必须要有的）
            return '当前最新的数量是'+ state.count 
        }
  }
})
复制代码

组件中访问方式一：

this.$store.getters.名称

组件中访问方式二：

1、从 vuex 中按需导入 mapGetters 函数

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

import { mapGetters } from 'vuex'
computed: {
  ...mapGetters(['showNum'])
}
复制代码