<> one , Basic structure
src/store/index.js in , The code is as follows
// vue3 Created in store Methods for instance objects createStore() On demand import import { createStore } from 'vuex'
export default createStore({ state: { }, mutations: { }, actions: { }, getters:
{ }, modules: { } })
<> two , Basic use
src/store/index.js
import { createStore } from 'vuex' export default createStore({ state: { info:
'hello' }, mutations: { // definition mutations, Used to modify status ( synchronization ) updateInfo (state, payload) {
state.info = payload } }, actions: { // definition actions, Used to modify status ( asynchronous ) // 2 Update status in seconds
updateInfo (context, payload) { setTimeout(() => { context.commit('updateInfo',
payload) }, 2000) } }, getters: { // Define a getters formatInfo (state) { return
state.info + ' Tom' } }, modules: { } })
src/views/Test.vue In the test component store Operation and use of data in
<template> <div> Test components </div> <hr> <!-- Render time and vue2 Use the same method in --> <div>
obtain Store Medium state,getters: {{$store.getters.formatInfo}}</div> <button @click='
handleClick'> click </button> </template> <script> // On demand import useStore() method import {
useStore} from 'vuex' export default { name: 'Test', setup () { //
this.$store.state.info // Vue3 in store be similar to Vue2 in this.$store //
useStore() Method creation store object , amount to src/store/index.js Medium store Instance object const store = useStore()
console.log(store.state.info) // hello // modify info Value of const handleClick = () => {
// trigger mutations, Used to synchronize changes state Information for // store.commit('updateInfo', 'nihao') //
trigger actions, For asynchronous modification state Information for store.dispatch('updateInfo', 'hi') } return {
handleClick} } } </script>
Before clicking the button
After clicking the button
<> three , take store Use after data modularization in
<>1. modularization
Based on original index.js Code transformation and splitting , Suppose there are two modules global and user, newly build src/store/modules/global.js ,
src/store/modules/user.js file
The code after splitting is as follows （src/store/modules/global.js）
// overall situation store, Store global shared data export default { // be careful ： The namespace does not need to be opened in the global module state: { },
mutations: { }, actions: { }, getters: { } }
The code after splitting is as follows （src/store/modules/user.js）
// User information module ( Local module ) export default { namespaced: true, // Open namespace state () { return
{ // User information object profile: { id: '', avatar: '', nickname: 'yee', account: '', mobile
: '', token: '' } } }, mutations: { // definition mutations, Used to synchronize modification status updateNickname (
state, payload) { state.profile.nickname = payload } }, actions: { //
definition actions, For asynchronously modifying state // 2 Update status in seconds updateNickname (context, payload) { setTimeout(()
=> { context.commit('updateNickname', payload) }, 2000) } }, getters: { //
Define a getters formatNickname (state) { return 'Hi ' + state.profile.nickname } } }
The code after splitting is as follows （src/store/index.js）
import { createStore } from 'vuex' // Global module import global from
'./modules/global' // Local module import user from './modules/user' export default
createStore({ // Global module ...global, // Local module modules: { user } })
<>2. use
src/views/Test.vue Test the modularized store Operation and use of data in
<template> <div> Test components </div> <hr> <div> obtain Store in user Modular getters: {
{$store.getters['user/formatNickname']}}</div> <button @click='handleClick'> click </
button> </template> <script> import { useStore } from 'vuex' export default {
name: 'Test', setup () { // this.$store.state.info //
Vue3 in store be similar to Vue2 in this.$store const store = useStore() console.log(store.state.
user.profile.nickname) // modify nickname Value of const handleClick = () => { //
trigger mutations, Used to synchronize changes user modular state Information for // store.commit('updateNickname', 'Jackson')
store.dispatch('user/updateNickname', 'Yee') } return { handleClick } } } </
script>
Before clicking the button
After clicking the button
Technology