目标

• 能够说出VUEX的基本使用步骤
• 能够说出vuex的核心概念
• 能够基于vuex实现业务功能

目录

1. vuex概述
2. vuex的基本使用
3. vuex的核心概念
4. 基于vuex的案例

1、vue概述

1.1 组件之间共享数据的方式【小范围】

• 父向子传值：v-bind属性绑定
• 子向父传值：v-on 事件绑定
• 兄弟/不相干组件之间共享数据：EventBus
  • $ on 接收数据的那个组件
  • $ emit 发送数据的那个组件

1.2 vuex是什么

vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

数据共享

1.3 使用vuex统一管理状态的好处

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

1.4 什么样的数据适合存储到vuex中

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

2、vuex的基本使用

2.1 安装vuex依赖包

npm install vuex --save

2.2 导入vuex包

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

2.3 创建store对象

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

目录结构

2.4 将store对象挂载到vue实例中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import './plugins/element.js'
import axios from '../node_modules/axios'
import VueAxios from '../node_modules/vue-axios'
import globalParameter from './components/Global.vue'
// import ace from '../node_modules/ace-builds'
// import ace from '../node_modules/vue2-ace-editor'
import VueContextMenu from '../node_modules/vue-contextmenu'
import VueParticles from 'vue-particles' 
Vue.use(VueParticles) 
Vue.use(VueContextMenu)
Vue.prototype.globalParameter = globalParameter;


Vue.use(VueAxios, axios)
// Vue.use(ace)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

或者
new Vue({
  el: '#app',
  render:h =>h(app),
  router,
  //将创建的共享数据对象，挂载到vue实例中
  //所有的组件，就可以直接从store中获取全局的数据了。
  store,
})

2.5 案例

计数器
（1）减

减法组件

（2）加

加法组件

（3）app中组件

使用组件

（4）效果

效果
（5）附：配置文件【根目录下.pretterrc
约束

目的：不加分号，单引号代替双引号

{
  "semi": false,
  "singleQuote": true
}

结果1

选择【配置】

配置

3、vuex的核心概念

3.1 核心概念概述：

vuex中主要核心概念如下：

• State
• Mutation
• Action
• Getter

3.2 State

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

//创建store数据源，提供唯一公有数据
const store = new Vue.Store({
    state:{
        count:0
    }
})

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count：0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

（1）组件访问state中数据的第一种方式：
this.$store.state.全局数据名称

使用
（2）组件访问State中数据的第二种方式：

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

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

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

使用示例

注意：不允许组件中直接修改store中的数据。（用Mutation）

错误的实现加法

3.3 Mutation

Mutation用于变更Store中的数据。

• 只能通过mutation变更Store数据，不可以直接操作Store中的数据。
• 通过这种方式虽然操作起来稍微繁琐一些，但是可以几种监控所有数据的变化。

//定义Mutation
const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    add(state){
    //变更状态
    state.count++
    }
  }
})

（2）使用mutation中的方法：【使用commit】

//触发mutation
methods：{
  handle（）{
    //触发mutations的第一种方式
    this.$store.commit('add')
   }
}

正确使用：

正确使用

Mutations触发时传递参数：

//定义Mutation
const store = new Vue.State({
  state:{
    count:0
   },
  mutations:{
    addN(state, step){
      //变更状态
      state.count +=step
    }
  }
})

使用

//触发mutation
methods：{
  handle2(){
    //在调用commit函数，
    //触发mutations时携带参数    
    this.$store.commit('addN',3)
  }
}

（2）触发mutations的第二种方式：

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

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

methods:{
  ...mapMutations(['add','addN'])
}

示例 示例2

异步操作：【错误，state数据不同步】

1秒后增加 mutation中不能写异步函数

3.4 Action

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

//定义Action
const store = new Vuex.Store({
  //....省略其它代码
  mutations：{
    add（state）{
      state。count++
    }
  }，
  actions:{
    //context被认为是new的Store对象
    addAsync(context){
      setTimeout(()=>{
        context.commit('add')
      },1000)
    }
  }
})

触发对应的Action：

//触发Action
methods:{
  handle(){
    //触发actions的第一种方式
    this.$store.dispatch('addAsync')
  }
}

只有mutations中定义的函数，才有权力修改state中的数据。

示例
示例2
结果

触发actions异步任务是携带参数：

//定义Action
const store = new Vuex.Store({
  //....省略其它代码
  mutations：{
    add（state）{
      state。count++
    }
  }，
  actions:{
    //context被认为是new的Store对象
    addAsync(context,step){
      setTimeout(()=>{
        context.commit('addN', step)
      },1000)
    }
  }
})

触发对应的Action：

//触发Action
methods:{
  handle(){
    //触发actions的第一种方式
    this.$store.dispatch('addNAsync',5)
  }
}

示例

（2）触发actions的第二种方式：

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

通过刚才导入的mapAction函数，将需要的actions函数，映射为当前组建的methosds方法：

//2. 将指定的actions函数，将需要的actions函数，映射为当前组件的methods方法：
methods:{
  ...mapActions(['addAsync'，'addNAsync'])
}

直接调用该方法：

示例

3.5 Getter

Getter 用于对Store中的数据进行加工处理形成的新的数据。（不会修改原数据）

• Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
• Store中数据发生变化，Getter的数据也会跟着变化。

//定义Getter
const store = new Vuex.State({
 state:{
   count:0
  },
 getters:{
   showNum: state=>{
     return '当前最新的数量是【'+state.count+'】'
   },
    showNum2(state){
     return '当前最新的数量是【'+state.count+'】'
   }
 }
})

（1）使用getters的第一种方式：
this.$store.getters.名称

示例
（2）使用getters的第二种方式：

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}

示例

4、基于vuex的案例

案例
初始化项目

依赖：axios

依赖
依赖：ant-design-vue
依赖

main.js

main.js
App.vue
App.vue1
App.vue2
app.vue3 App.vue3
eslint
github上to-do-list源码