Vuex核心概念

Vuex 学习笔记

1.Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

2.如何使用Vuex

2.1 首先需要安装Vuex

如果使用的是Vue-CLI，那么在创建一个项目选取安装工具包的时候要选中Vuex进行统一创建

如果使用的是普通的开发模式，则需要使用npm或者其他安装工具进行单独安装

Vue-Cli 安装的Vuex是有默认代码的

单独安装的则需要创建一个文件来引入Vuex

// 首先在此文件中 引入Vue
import Vue from 'vue'
// 再将 Vuex 引入
import Vuex from 'Vuex'
// 在Vue中注册Vuex
Vue.use(Vuex)
// 将 一个实例化store 进行抛出出
export default new Vuex.Store({
    state: {},
    getters:{},
    mutations:{},
    A
})
// 最后在vue实例中 注册 Store

3. 核心概念

3.1 State

用来存储多个组件中都用的属性或者说是变量

App.vue 文件：

<template>
  <div id="App">
      <-- 在此处展示Vuex的index.js文件中的count变量 -->
    <p>{{$store.state.count}}</p>
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {}
  }
}
</script>

Vuex 文件 文件名为 index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 10
  }
})

以上方法可以展示index.js 的 state 中的 属性值

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。

我们会用一个辅助函数来代替 mapState

使用辅助函数来 简化以上代码

index.js文件的代码不变，此方法需定义在 组件的 computed 计算属性当中

App.vue 文件：

<template>
  <div id="App">
      <-- 在此处展示Vuex的index.js文件中的count变量 -->
    <p>{{$store.state.count}}</p>
  </div>
</template>
<script>
// 首先引入这个方法 
import {mapState} from 'vuex'
export default {
  name: 'App',
  data () {
    return {}
  },
    computed:{
        ...mapState(['count'])
        // 此函数的返回结果是一个对象，所以要使用 ... 展开运算符 将他们展开放在computed 属性中
    }
}
</script>

3.2Getters

这个和Vue计算属性相像，可以认为是 store 的计算属性，它定义在 Store的实例对象中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 10,
    songList: [
      { id: 1, name: '龙卷风', auther: '邓紫棋' },
      { id: 2, name: '双节棍', auther: '周杰伦' },
      { id: 3, name: '勿忘', auther: '李代沫' }
    ]
  },
  getters: {
    counts: state => state.songList.length
  }
})

在组件中如何使用它

<template>
  <div id="App">
    <p>总共有{{ $store.getters.counts }}首歌曲</p>
  </div>
</template>

他也有一个辅助函数mapGetter

在vue组建中使用它这个辅助函数

<template>
  <div id="App">
    <p>总共有{{ counts }}首歌曲</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'App',
  data () {
    return {

    }
  },
  computed: {
    ...mapGetters(['counts'])
  }

}
</script>

<style>
</style>

3.3 Mutations

这个属性和Methods相似，是用来定义方法的

Mutations 中必须是同步函数

在想要操作store中state中的属性时不可以直接修改该属性，需要通过mutation进行修改

演示：

<template>
  <div id="App">
    <p>{{ count }}</p>
    <button @click="add">自增</button>
  </div>
</template>
<script>
    import { mapState } from 'vuex'
    export default {
        name:"App",
        data(){
            return {}
        },
        methods:{
            add(){
               	// 需要使用commit 函数来调用 mutations中的函数来改变count值
                this.$store.commit('addcount')
            }
        },
        computed: {
            ...mapState(['count'])
          }
    }
</script>

index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
      addcount(state){
          state.count++
      }
  }
})

每次调用mutations中的方法使用commit会很不方便，它和上面的其他属性一样，也有一个辅助函数

mapMutation

想要调用mutations中的方法来修改state中的属性，相对简单多了

<template>
  <div id="App">
    <p>{{ count }}</p>
    <button @click="add">自增</button>
  </div>
</template>
<script>
    import { mapState,mapmutations } from 'vuex'
    export default {
        name:"App",
        data(){
            return {}
        },
        methods:{
        	...mapmutations(['addcount']) //其实就是相当于将这个方法引入，在methods中可以通过this来调用该方法
            add(){
                this.addcount()
            }
        },
        computed: {
            ...mapState(['count'])
          }
    }
</script>

3.4 Action

Action 类似于 mutation，不同在于：

• Action 不能直接变更状态（state的属性），必须使用commit提交到mutation中的方法进行修改。
• Action 可以包含任意异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

3.5 Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割