Vuex的应用场景

• 单页面开发

• 组件通信

  Vuex的属性

• Vuex包含五大属性：

1. state(存放状态) 、
2. action(提交mutation，进行异步操作)
3. getters(state的计算属性)
4. modules(将store模块化)
5. mutation(更改状态逻辑，进行同步操作)

• state
  1. Vuex其实就是一个仓库，仓库里面放了很多对象。其中state就是存放数据源的地方，对应与Vue对象里面的data
  2. 其中state里面存放的数据为响应式数据,Vue组件从store仓库中读取数据，若仓库中的数据发生改变的时候，依赖这个数据的组件也会随之更新
  3. state通过mapState把全局的state和getters映射到当前组件的computed计算属性中
• getters
  1. getters可以对state进行计算操作，它就是store的计算属性
  2. 虽然在组件内也有计算属性，但是getters可以在多组件复用
  3. 如果一个状态只在一个组件内使用，可以不用getters
• mutation
  1. action类似于mutation
     1. mutation必须是同步操作
     2. action可以包含任意的异步操作
     3. action提交的是mutation，不是直接变更状态
     4. 视图触发action，action触发mutation

不多**,代码供上

const store = new Vuex.Store({
  state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
   //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

Vuex的作用

某个状态的变化可以在组件内实时监测、并进行处理

不用Vuex的弊端

• 可维护性会下降，你要想修改数据，你得维护三个地方
• 可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的
• 增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

  辅助函数

  知识点

首先在讲解用法前我们先创建一个仓库实例

import Vue from 'vue'
import Vuex from 'vuex'
import {Mockurl} from '@/until'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
      count:0,
      data:[]，
      sex:0
      },
  mutations: {
      changeData(state,actions){
          state.data = [...actions.data]
      },
      add(state){
        ++state.count
      },
      dis(state){
        --state.count
      }
  },
  actions: {
      getData(store){
          axios.get('/get/data').then(data=>{
              store.commit('changeData',data)
          })
      }
  },
  getters:{
      sex(state){
          return state.sex === 0 ? '男':'女'
      }
  }
})

mapState读取仓库状态

<template>
 <div>{{count}}</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
 computed:{
  ...mapState(['count']),
 }
}
</script>

mapMutations 修改仓库状态

<template>
 <div>
    <span @click="dis" >-</span>
    {{count}}
    <span @click="add" >+</span>
 </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
 methods:{
    ...mapMutations(['add','dis'])
 }
}
</script>

mapActions 异步处理

<script>
import { mapActions } from 'vuex'
export default {
 methods:{
    ...mapActions(['getData'])
 }
}
</script>

getters 数据派生

<template>
        <div>
           性别:{{sex}}
        </div>
    </template>
    <script>
    import { mapGetters } from 'vuex'
    export default {
        computed:{
            ...mapGetters(['sex'])
        }
    }
    </script>