vuex中包含有：state，getters，mutations，actions，modules，mutations_type。

import Vue from 'vue' import Vuex from 'vuex'import state from './state' import getters from './getters' // import mutations from './mutations' import mutations from './mutations_type' import actions from './actions'import users from './users'Vue.use(Vuex)export default new Vuex.Store({// state相當(dāng)于組件中的data，專門用來存放全局的數(shù)據(jù)state,// getters相當(dāng)于組件中的computed，getters是全局的，computed是組件內(nèi)部的getters,// mutations相當(dāng)于組件中的methods，但是它不能使用異步方法，（定時(shí)器，axios）mutations,// actions專門用來處理異步，實(shí)際修改狀態(tài)值的，異步請(qǐng)求方法actions,modules: {users} })

另外，這6個(gè)屬性都可以單獨(dú)拆分出來寫一個(gè)文件，如圖

1. state

state相當(dāng)于組件中的data，專門用來存放全局的數(shù)據(jù)。

<template><div><p>About頁面的數(shù)字： {{ num }}</p><button @click="increase(2)">about中的點(diǎn)擊添加2</button></div> </template><script> import { mapState, mapMutations } from 'vuex' import { MUTATIONS_TYPE } from '@/store/mutations_type' export default {computed: {...mapState(['num'])},methods: {...mapMutations([MUTATIONS_TYPE.INCREASE])} } </script>

2. getters

getters相當(dāng)于組件中的computed，getters是全局的，computed是組件內(nèi)部的

<template><div><p>Home頁面的數(shù)字： {{ getNum }}</p><p>{{ $store.state.users.nickName }}</p><button @click="changeNickName('侯啟蒙')">修改名稱</button><button @click="increase(10)">點(diǎn)擊加10</button></div> </template><script> import { mapGetters, mapMutations } from 'vuex' export default {computed: {...mapGetters(['getNum'])},methods: {...mapMutations({'changeNickName': 'users/changeNickName','increase': 'increase'})} } </script>

3. mutations

mutations相當(dāng)于組件中的methods，但是它不能使用異步方法（定時(shí)器，axios）

4. actions

actions也相當(dāng)于組件中的methods，是專門用來處理異步，實(shí)際修改狀態(tài)值的異步請(qǐng)求方法。

<template><div><button @click="increase(3)">點(diǎn)擊加3</button><button @click="decreaseAsync(2)">點(diǎn)擊減2</button></div> </template><script> import { mapMutations, mapActions } from 'vuex' export default {methods: {...mapMutations(['increase']),...mapActions(['decreaseAsync'])} } </script>

5. modules

modules，顧名思義，模塊管理，如果存在多個(gè)vuex，可以分離出一個(gè)模塊，這個(gè)模塊同樣擁有state，getters，mutations，actions，modules和mutations_type的屬性。

vuex案例

總結(jié)

以上是生活随笔為你收集整理的vuex的基础使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。