- store状态的使用以及案列

功能描述

由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue提供vuex。

本例实现功能描述

本列创建了一个状态，并在另一个组件中查看并修改了状态。

[!TIP|label: 定义storeMessage.js]
我们以基础框架为基础，在src/store文件夹下新建一个storeMessage.js文件

export default ({
  state: {
    // 这里放全局参数
    message: 'Hello!'
  },
  mutations: {
    // 这里是set方法
    setMessage (state, newValue) {
      state.message = newValue
    }
  },
  getters: {
    // 这里是get方法
    getMessage: state => state.message
  }
})

[!TIP|label: 配置统一状态分组]
找到sys/store/index.js文件，先导入storeMessage文件，再在medules下配置storeMessage

import storeMessage from "./storeMessage";
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    common,
    user,
    storeMessage
  }
})

[!TIP|label: 定义homeStore.vue]
再在src/views/basic/sys文件夹下新建一个homeStore.vue文件,再为其配置菜单
配置菜单的具体方法见vue方式开发指南-部署与启动里面的菜单路由配置

<template>
  <div>
    <button @click="checkMessage()"> 查看状态 </button>
    <button @click="changeMessage()"> 改变状态 </button>
    <p>{{ msgStore }}</p>
  </div>
</template>
<script>
  export default {
    name: "homeStore",
    methods: {
      checkMessage() {
        console.log (this.$store.getters.getMessage)
      },
      changeMessage() {
        this.$store.commit('setMessage', '李四');
        console.log (this.$store.getters.getMessage)
      }
    },
    computed:{
      msgStore: function () {
        return this.$store.getters.getMessage
      }
    }
  }
</script>
<style scoped>
</style>