vuex(根据黑马视频总结）

1.概念

实现组件之间的数据共享

2. 创建项目

可以直接可视化命令创建，终端运行vue ui
项目目录结构

Prettier - Code formatter插件—代码格式化插件，vscode商城安装，在代码根目录下建立.prettierrc
一般配置就是上图
比较常见的配置

3.vuex的核心概念

3.1 State

定义 —store数据源，提供唯一公共数据

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

访问方式

	方法
方法一	this.$store.state.全局数据名称
方法二	1.从vuex中按需导入mapState函数 import {mapState} from 'vuex' 2.将全局数据映射为当前组件的计算属性computed:{...mapState(['count'])}

3.2 Mutation

用于变更store中的数据
①只能通过mutation变更store中的数据，不可以直接操作store中的数据
②这种方式有点麻烦，但是可以集中监控所有数据的变化
定义mutation

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

	触发方式
①	this.$srore.commit()
②	通过刚才导入的mapMutations函数，将需要的mutation函数，映射为当前组建的methods方法 methods:{...mapMutations(['add'])}

触发mutation的第一种方式

  methods:{
    add(){
      this.$store.commit('add')
    }
  }

可以在触发mutation的时候传递参数

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

  methods:{
    add(){
      this.$store.commit('add',3)
    }op0l
  }

触发mutation的第二种方式

import { mapState, mapMutations } from 'vuex'
methods: {
    ...mapMutations(['sub']),
    subBtn() {
      this.sub(3)
    }
  }

？实现点击按钮延迟一秒加3

按照之前的思路

  mutations: {
    add (state,step) {
      // 变更状态
      setTimeout(()=>{
        state.count+=step
      },1000)
    },
    sub (state,step) {
      // 变更状态
      state.count-=step
    }
  }

实际的效果

页面上是变化了，但是state里面的值却没有发生任何变化，因此在Mutation函数里面不能写异步的代码

3.3 Action

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

	触发方式
①	this.$store.dispatch('addAsync',3)
②	从vuex中按需导入mapActions函数:import { mapActions } from 'vuex' 过刚才导入的mapActions函数，将需要的action函数，映射为当前组建的methods方法:methods:{...mapActions(['addAsync'])}

export default  new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state, step) {
      // 变更状态
      state.count += step
    },
    sub (state, step) {
      // 变更状态
      state.count -= step
    }
  },
  actions:{
    addAsync(context,step){
      // 在action中，不能直接修改 state 里面的数据
      // 必须通过 context.commit() 触发某个 mutation 才行，这也印证了只有 mutation 中定义的函数，才有权利修改 state 中的数据
      setTimeout(()=>{
        context.commit('add',step)
      },1000)
    }
  }

vue文件

  methods:{
    add(){
      this.$store.commit('add',3)
    },
    addAsyncfun(){
      // 这里的dispatch专门用来触发 action 函数
      this.$store.dispatch('addAsync',3)
    }
  }

3.4 Getter

① getter用于对Store中的数据进行加工处理形成新的数据，类似于vue的计算属性
②store中数据发生变化，getter的数据也会发生变化

export default  new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showNum:state=>{
      return `当前最新的值是[${state.count}]`
    }
  }
})

触发方式

	触发方式
①	this.$store.getters.showNum
②	import { mapGetters } from 'vuex' computed: { ...mapGetters(['showNum'])

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

Vue.use(Vuex)

export default  new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state, step) {
      // 变更状态
      state.count += step
    },
    sub (state, step) {
      // 变更状态
      state.count -= step
    }
  },
  actions:{
    addAsync(context,step){
      // 在action中，不能直接修改 state 里面的数据
      // 必须通过 context.commit() 触发某个 mutation 才行，这也印证了只有 mutation 中定义的函数，才有权利修改 state 中的数据
      setTimeout(()=>{
        context.commit('add',step)
      },1000)
    },
    subAsync(context,step){
      setTimeout(()=>{
        context.commit('sub',step)
      },1000)
    }
  },
  getters: {
    showNum:state=>{
      return `当前最新的值是[${state.count}]`
    }
  }
})

<template>
  <div>
    <h3>{{showNum}}}</h3>
    <button @click="subBtn">-1</button>
    <button @click="subBtnAsync">-1 Async</button>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions,mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    ...mapMutations(['sub']),
    ...mapActions(['subAsync']),
    subBtn() {
      this.sub(3)
    },
    subBtnAsync() {
      this.subAsync(2)
    }
  },
}
</script>

4 vuex案例