Vuex状态管理使用方式

原创已于 2022-04-18 14:41:08 修改 · 95 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

于 2021-09-11 11:29:13 首次发布

//先在sotre下面index.js文件写入状态
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name : '亚当',
    age : '30岁'
  },
  mutations: {
  },
  actions: {
    fun(){
      
    }
  },
  modules: {
  }
})

//再到需要的页面导入
<template>
    <div>
        <h2>
            更多
            //再使用
            {{ age }}
        </h2>
    </div>
</template>

<script setup>
//导入
import { mapState } from 'vuex'

    export default {
    //再到计算属性解构
        computed : {
            ...mapState(['age'])
        }
    }
</script>

<style lang="scss" scoped>

</style>