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相當于組件中的data，專門用來存放全局的數據state,// getters相當于組件中的computed，getters是全局的，computed是組件內部的getters,// mutations相當于組件中的methods，但是它不能使用異步方法，（定時器，axios）mutations,// actions專門用來處理異步，實際修改狀態值的，異步請求方法actions,modules: {users} })

另外，這6個屬性都可以單獨拆分出來寫一個文件，如圖

1. state

state相當于組件中的data，專門用來存放全局的數據。

<template><div><p>About頁面的數字： {{ num }}</p><button @click="increase(2)">about中的點擊添加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相當于組件中的computed，getters是全局的，computed是組件內部的

<template><div><p>Home頁面的數字： {{ getNum }}</p><p>{{ $store.state.users.nickName }}</p><button @click="changeNickName('侯啟蒙')">修改名稱</button><button @click="increase(10)">點擊加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相當于組件中的methods，但是它不能使用異步方法（定時器，axios）

4. actions

actions也相當于組件中的methods，是專門用來處理異步，實際修改狀態值的異步請求方法。

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

5. modules

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

vuex案例

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。