Vue3中vuex的基本使用方法实例_vue.js

// vue3中创建store实例对象的方法createStore()按需引入  import { createStore } from 'vuex'  export default createStore({    state: {    },    mutations: {    },    actions: {    },    getters: {    },    modules: {    }  })

import { createStore } from 'vuex'  export default createStore({    state: {      info: 'hello'    },    mutations: {      // 定义mutations，用于修改状态(同步)      updateInfo (state, payload) {        state.info = payload      }    },    actions: {      // 定义actions，用于修改状态(异步)      // 2秒后更新状态      updateInfo (context, payload) {        setTimeout(() => {          context.commit('updateInfo', payload)        }, 2000)      }    },    getters: {      // 定义一个getters      formatInfo (state) {        return state.info + ' Tom'      }    },    modules: {    }  })  

<template>    <div>测试组件</div>    <hr>    <!-- 页面中直接使用渲染时与vue2中的使用方法相同 -->    <div>获取Store中的state、getters: {{$store.getters.formatInfo}}</div>    <button @click='handleClick'>点击</button>  </template>    <script>  // 按需引入useStore()方法  import { useStore } from 'vuex'    export default {    name: 'Test',    setup () {      // this.$store.state.info      // Vue3中store类似于Vue2中this.$store      // useStore()方法创建store对象，相当于src/store/index.js中的store实例对象      const store = useStore()      console.log(store.state.info) // hello      // 修改info的值      const handleClick = () => {        // 触发mutations，用于同步修改state的信息        // store.commit('updateInfo', 'nihao')        // 触发actions，用于异步修改state的信息        store.dispatch('updateInfo', 'hi')      }      return { handleClick }    }  }  </script>

// 全局store,存放全局使用共享的数据  export default { // 注意：全局模块中不需要开启命名空间    state: {    },    mutations: {    },    actions: {    },    getters: {    }  }

// 用户信息模块(局部模块)  export default {    namespaced: true, // 开启命名空间    state () {      return {        // 用户信息对象         profile: {          id: '',          avatar: '',          nickname: 'yee',          account: '',          mobile: '',          token: ''        }      }    },    mutations: {      // 定义mutations，用于同步修改状态      updateNickname (state, payload) {        state.profile.nickname = payload      }    },    actions: {      // 定义actions，用于异步修改状态      // 2秒后更新状态      updateNickname (context, payload) {        setTimeout(() => {          context.commit('updateNickname', payload)        }, 2000)      }    },    getters: {      // 定义一个getters      formatNickname (state) {        return 'Hi ' + state.profile.nickname      }    }  }

import { createStore } from 'vuex'  // 全局模块  import global from './modules/global'  // 局部模块  import user from './modules/user'    export default createStore({    // 全局模块    ...global,    // 局部模块    modules: {      user    }  })

<template>    <div>测试组件</div>    <hr>    <div>获取Store中user模块的getters: {{$store.getters['user/formatNickname']}}</div>    <button @click='handleClick'>点击</button>  </template>    <script>  import { useStore } from 'vuex'  export default {    name: 'Test',    setup () {      // this.$store.state.info      // Vue3中store类似于Vue2中this.$store      const store = useStore()      console.log(store.state.user.profile.nickname)      // 修改nickname的值      const handleClick = () => {        // 触发mutations，用于同步修改user模块state的信息        // store.commit('updateNickname', 'Jackson')        store.dispatch('user/updateNickname', 'Yee')      }      return { handleClick }    }  }  </script>

const mutations = {    addCount(state, payload) {      state.count += payload    },  }  export { mutations }  

<template>    <h1>vuex中的数据{{ store.state.count }}</h1>    <button @click="changeStoreCount">改变vuex数据</button>  </template>  <script lang="ts">  import { defineComponent } from "vue"  import { useStore } from "vuex"  export default defineComponent({    name: "index",    setup() {      const store = useStore()      console.log(store)      const changeStoreCount = () => {        // 在这里提交了mutations中的addCount方法        store.commit("addCount", 1)      }      return { store, changeStoreCount }    },  })  </script>  <style scoped></style>