Vue中vuex的使用

Vue中vuex的使用

概述

• 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
• 在多个组件需要共享数据时使用

使用方式

在src/store文件夹下创建index.js文件

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state
})

在main.js文件中创建vm的时候传入store配置项

//引入store
import store from './store'

//创建vm
new Vue({
  el:'#app',
  render: h => h(App),
  store
})

state属性

state中包含了具体存储的数据。

//准备state对象——保存具体的数据
const state={
  countNum:0,
  isCount:true,
  stateMsg:'this is state msg'
}
//创建并暴露store
export default new Vuex.Store({
  state
})

当给state添加了数据之后，我们可以在组件中使用如下的方式来读取

<template>
  <div >
    {{$store.state.stateMsg}}
  </div>
</template>

getters

getters是对state中数据的获取方法，可以对state中的数据进行再加工

const state={
  countNum:0
}
const getters={
  countNumAdd(state){
    return state.countNum+1
  }
}
export default new Vuex.Store({
  state,
  getters
})

在给getters中添加了方法之后，我们可以通过如下形式来获取数据

<template>
  <div >
    {{$store.getters.countNumAdd}}
  </div>
</template>

mutations

mutations的作用是对数据的修改，对数据进行操作

const state={
  countNum:0
}
const mutations ={
  ADD(state,value){
    state.countNum += value
  }
}
export default new Vuex.Store({
  state,
  mutations
})

组件调用mutations中方法的方式

this.$store.commit('mutations中方法名',数据)

如下代码所示

<template>
  <div >
    {{$store.state.countNum}}
    <hr/>
    <button @click="toAdd">调用mutations方法加10</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods:{
    toAdd(){
      this.$store.commit('ADD',10)
    }
  }
}
</script>

actions

由于mutations操作不能执行异步操作，所以vuex为了解决mutations只有同步的问题,提出了actions(异步)。

action不可以修改store中的数据，需要commit mutation中的方法进行数据修改,其使用方法为：

const state={
  countNum:0
}
const mutations ={
  ADD(state,value){
    state.countNum += value
  }
}

const actions={
  addByAction(content,val){
    content.commit('ADD',val)
  }
}
export default new Vuex.Store({
  state,
  mutations,
  actions
})

对用action中的方法需要是用dispatch

<template>
  <div >
    <button @click="toAdd">调用mutations方法加10</button>
    <hr/>
    <button @click="toAddByActions">调用actions方法加10</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods:{
    toAdd(){
      this.$store.commit('ADD',10)
    },
    toAddByActions(){
      this.$store.dispatch('addByAction',20)
    }
  }
}
</script>

map方法的使用

mapstate

mapState用于帮助我们映射state中的数据为计算属性，在最初的获取数据的时候，使用了{{$store.state.countNum}}的形式，在模板语法中使用了过长的表达式，不直观也不美观，所以我们可以把它简化成计算属性来实现，代码如下

computed: {
	countNum(){
    return this.$store,state.countNum
  }
}

但是这样写依然很累赘，vuex提供了mapState映射计算属性

对象的写法形式

<template>
  <div >
    {{LocalStateMsg}}
    <hr/>
    {{localCountNum}}
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'HelloWorld',
  computed:{
    ...mapState({
      localCountNum:'countNum',
      LocalIsCount:'isCount',
      LocalStateMsg:'stateMsg'
    })
  }
}
</script>

数组形式的写法

<template>
  <div >
    {{stateMsg}}
    <hr/>
    {{countNum}}
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'HelloWorld'
  computed:{
    ...mapState(['countNum','isCount','stateMsg'])
  }
}
</script>

mapGetters

同mapState一致，不过此计算属性不从state中获取，而是从getter中获取

具体的代码如下所示（计算属性中添加）：

//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
...mapGetters({localCountAdd:'countAdd'})

//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
...mapGetters(['countAdd'])

mapActions

用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数。

在原来的写法中，我们创建了toAddByActions点击事件，在这个点击事件中，调用vuex的dispatch方法来实现对数据的加法操作，通过ADD来对数据进行操作，可以使用mapActions来简化代码，如下所示（methods中添加）：

<template>
  <div >
    {{countNum}}
    <hr/>
    <button @click="toAdd">调用mutations方法加10</button>
    <hr/>
    <button @click="addByAction(10)">调用actions方法加10</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions} from "vuex";

export default {
  name: 'HelloWorld',
  methods:{
    toAdd(){
      this.$store.commit('ADD',10)
    },
    ...mapActions({
      addByAction:'addByAction'
    })
  }
}
</script>

数组的写法

...mapActions(['method1','method2'])

• 对象形式中，key是自定义的，对应的是组件中实际的方法名，value是对应actions中实际要执行的方法名
• 数组中methods的名字和actions中的方法名应当一致
• 如果不传参数，actions中默认接受到的参数为event事件本身（因为点击事件的默认传参就是事件本身）
• 如果需要传参，那么在调用的时候直接进行传参即可@click="addByAction(10)"

mapMutations

和mapActions一样的使用方式，针对的是$store.commit(xxx)函数

methods:{
	...mapMutations({METHOD1:'METHOD1',METHOD2:'METHOD2'}),
	...mapMutations(['METHOD1','METHOD2']),
}

模块化命名空间

目的：为了让代码更好的维护，让多种数据分类更加明确

const countAbout = {
     namespaced:true,//开启命名空间
     state:{},
     mutations: { ... },
     actions: { ... },
     getters: {...}
   }
   
   const personAbout = {
     namespaced:true,//开启命名空间
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })

开启命名空间后，组件中读取state数据

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
  ...mapState('countAbout',['countNum','isCount','stateMsg']),

开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstName']
//方式二：借助mapGetters读取：
  ...mapGetters('countAbout',['countNumAdd'])

开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPerson',person)
//方式二：借助mapActions：
  ...mapActions('countAbout',{ADD:'ADD',MUT:'MUT'})

开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/toADDPERSON',person)
//方式二：借助mapMutations：
  ...mapMutations('countAbout',{toADD:'toADD',toMUT:'toMUT'}),