vuex中的store存储数据的几种方式

Vuex是一个专门为Vue.js应用程序开发的状态管理模式，这个状态自管理应用包括三个模式

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

在store/index.js中创建store实例对象，并在里面配置state对象，例如

注意：可以自己手动创建store/index.js文件，并在main中及时导入引入，也可以在创建VUE项目时直接安装vuex

在vue文件中使用store中存储的数据，以下三种方法

• 直接在.vue文件中使用

<template>
    <div>
        {{$store.state.demoOne}}
    </div>
</template>

• 通过计算函数computed()

<template>
    <div id="app">
        {{getdata.demoOne}}
    </div>
</template>
<script>
export default {
    data(){
        return {}
    },
    computed: { //computed函数的特点:有一个缓存机制，若后来的代码依赖计算属性得出的值，那么后来的计算值将会取自第一次计算得出的值的缓存，避免一个值进行多次计算，影响代码的执行效率
        getdata(){
            return this.$store.state
        }
    },
}
<script>

• 通过mapState()辅助函数使用

<template>
  <div id="app">
    {{demoOne}}-{{demoTwo}}
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data(){
    return {}
  },
  computed:{
    ...mapState(['demoOne','demoTwo'])//扩展运算符
  },
}
</script>