四、vue3学习笔记：状态管理vuex

一、store中定义的常量在页面中使用

• src/store/state.js

const state = {
  appName: 'admin'
}

export default state

• src/store/module/user.js

const state = {
  userName: 'sun'
}

const mutations = {
  //
}

const actions = {
  //
}

export default {
  state,
  mutations,
  actions
}

• src/views/store.vue

<template>
  <div>
    <!--v-model指令为双向绑定-->
    <!--<a-input v-model="inputValue"/>-->
    <a-input @input="handleInput"/>
    <!--<a-input :value="inputValue", @input="handleInput"/>-->
    <!--<p>{{inputValue}}</p>-->
    <a-show :content="inputValue"/>
    <p>{{appName}}</p>
    <p>{{userName}}</p>
  </div>
</template>

<script>
  // 引入组件
  import AInput from '_c/AInput.vue'
  import AShow from '_c/AShow.vue'

  export default {
    name: "store",
    data() {
      return {
        inputValue: ''
      }
    },
    // 使用计算属性获得appName
    computed: {
      // 使用$store来访问,获取store文件夹根目录下的文件中的常量
      appName () {
        return this.$store.state.appName
      },
      // 获取store文件夹非根目录下的文件中的常量
      userName () {
        return this.$store.state.user.userName
      }
    },
    // 将组件注册
    components: {
      AInput,
      AShow
    },
    methods: {
      handleInput (value) {
        this.inputValue = value
      }
    }
  }
</script>

<style scoped>

</style>