什么！！！？VueX你还不会用？

首先看vuex的5个属性

1. state：vuex的基本数据，用来存储变量
 2. getters：从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
4. action：和mutation的功能大致相同，不同之处在于1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
 5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

接着就是两个难点 actions的使用 以及mutations

如图所示

 1.在组件中想要修改state里面的值 首先我们用mutations

<template>
  <div class="home">
    <h1>home</h1>
    <h1>我现在有{{ $store.state.money }}亿</h1>
    <button @click="ftn">加钱！！！</button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  methods: {
    ftn() {

      // commit用来调用mutations里面的方法
      this.$store.commit('add')
     

    }
  }
}
</script>

 官方给的图是不全的 组件间中可以直接通过this.$store.commit 调用mutations里面的方法

vuex里面这样写

export default createStore({
  state: {
    money: 1
  },
  getters: {//相当于是计算属性
  
  },
  mutations: {//vuex 规定 想要修改 state里面的数据 必须通过 mutations
    add(state, val) {
      state.money++
      console.log(val);
    }

  },
  actions: {//处理异步方法的
  
  },
  modules: {
  
  },
//持久化插件
  plugins: [
    new persist({
      storage: window.localStorage,
    }),
  ],
})

2 actions方法的使用 需要先传到actions再传到mutatins里面修改state的值，actions是不能直接修改state里面的值的

<template>
  <div class="home">
    <h1>home</h1>
    <h1>我现在有{{ $store.state.money }}亿</h1>
    <button @click="ftn">加钱！！！</button>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
 
  methods: {
  
    ftn() {

    
      // dispatch 用来调用actions里面的方法
      this.$store.dispatch('dayTime')
     

    }
  }
}
</script>

通过this.$state.dispatch()调用actions里面的方法

但是actions不能直接修改state里面的值 需要通过mutatins才可以

export default createStore({
  state: {
    money: 1
  },
  getters: {//相当于是计算属性
  
  },
  mutations: {//vuex 规定 想要修改 state里面的数据 必须通过 mutations
    add(state, val) {
      state.money++
      console.log(val);
    }

  },
  actions: {//处理异步方法的
    dayTime(context) {//方法里面是异步逻辑
      // ctx就是state这个实例
      setTimeout(() => {
        context.commit('add', 666)//可以传参数
      }, 5000)
    }
  },
  modules: {
 
  },
  plugins: [
    new persist({
      storage: window.localStorage,
    }),
  ],
})

需要通过 context 这个属性 .commit 

3.vuex的辅助函数

一直.$store.state. 取值非常麻烦 所以要用这个 比较方便

一共 4个

mapState  mapGetters mapMutations mapActions

前两个在computed 里面使用 最后两个个在methods里面使用

<template>
  <div class="home">
    <h1>home</h1>
    <h1>我现在有{{ money }}亿</h1>
    <!-- 这样写刷新就没了 解决方法安装vuex数据持久化插件npm install vuex-persistedstate --save -->
    <!-- <button @click="$store.state.money++">加钱！！！</button> -->
    <button @click="ftn">加钱！！！</button>
    <h2>转换成美元是{{ dollar }}亿</h2>

  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
  name: 'HomeView',
  computed: {
    
    ...mapState(['money']),
    ...mapGetters(['dollar'])
  },
  methods: {
...mapMutations(['add']),
    ...mapActions(['dayTime']),
    ftn() {

      // commit用来调用mutations里面的方法
      // this.$store.commit('add')
      // dispatch 用来调用actions里面的方法
      // this.$store.dispatch('dayTime')
      this.dayTime()
      this.add()

    }
  }
}
</script>

不必再每次使用$store 

import { createStore } from 'vuex';
import persist from 'vuex-persistedstate';
import a from './a'
import b from './b'
export default createStore({
  state: {
    money: 1
  },
  getters: {//相当于是计算属性
    dollar(state) {
      return state.money / 6.7
    }
  },
  mutations: {//vuex 规定 想要修改 state里面的数据 必须通过 mutations
    add(state, val) {
      state.money++
      console.log(val);
    }

  },
  actions: {//处理异步方法的
    dayTime(ctx) {//方法里面是异步逻辑
      // ctx就是state这个实例
      setTimeout(() => {
        // console.log(ctx);
        ctx.commit('add', 666)//可以传参数
      }, 1000)
    }
  },
  modules: {
    a, b
  },
  plugins: [
    new persist({
      storage: window.localStorage,
    }),
  ],
})