vuex

vuex是组件之间数据共享的，
如数据无论哪个组件都可以用得到

数据只是存储在js内存中，刷新页面就会没，想要持久化存储就需要存在storage里面
创建vuex会有一个这样的文件夹

例

vuex的基本使用

import { createStore } from 'vuex'

export default createStore({
 state: {
   //存放数据的
   name:"侯旭",
   age:18
 },
 getters: {
 },
 mutations: {
 },
 actions: {
 },
 modules: {
 }
})

那么我们在各个组件中使用vuex中的数据该怎么获取呢
在组件中用$store.state.数据名

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    {{$store.state.name}}  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

vuex

大多数我们使用方法用mapState辅助函数来完成,但要在computed中去使用

为什么要用mapState辅助函数呢,这样用起来特别简便,代替了$store.state这样很长的取值代码

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h2>{{name}},{{age}}</h2>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed:{
    ...mapState(['name','age'])
  }
  
}
</script>

• 首先要从vuex中引入mapState
• 然后用数组引入数据名的格式
• ...运算符用来拆解数组或对象的括号

mapState

vuex数据更变mutation

更改定义在vuex中的数据就要在mutation选项中去修改数据
在index.js中

mutations: {
    ageAdd(state){
      state.age++
    }
  },

写函数年龄增加的方法
在组件中引入mapMutation

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h2>{{name}},{{age}}</h2>
    <button @click="ageAdd">单击年纪+1</button>
  </div>
</template>
<script>
import { mapState,mapMutations } from 'vuex';
export default {
  computed:{
    ...mapState(['name','age'])
  },
  methods:{
    ...mapMutations(['ageAdd'])//跟数据的引入方法一样
  }
  
}
</script>

mutation

state: {
    //存放数据的,类似于data
    name:"侯旭",
    age:18
  },
  getters: {
    //类似于computed,处理一些复杂的表达式产生新的数据
  },
  mutations: {//类似于methods
    ageAdd(state){
      state.age++
    }
  },
  actions: {
    //异步的数据更变,不能直接改变数据 在actions里面调用mutations从而改变数据

  },
  modules: {
    //页面比较大的时候,vuex需要分模块的时候
  }