在Vue项目中使用Vuex

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

那什么是状态呢？以我的理解就是在vue组件的data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。所以Vuex可以这么理解：集中管理所有组件中需要共用的属性（数据），并且规定了对这些属性的操作。每次对这些属性进行操作都要遵守规定的形式，这样可以保证这些属性“以一种可预测的方式发生变化”。

关于Vuex的详细介绍可以直接移步官方文档：https://vuex.vuejs.org/zh-cn/。本文的内容主要是在实际项目中使用Vuex。

Vuex组成
Vuex的主要概念如下：

Store 
表示对Vuex对象的全局引用。组件通过Store来访问Vuex对象中的State（下面讲到）
State 
Vuex对象的状态，即其所拥有的数据
Getter 
相当于Store的计算属性。因为就像计算属性一样，Getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。下面会说到具体的使用场景
Mutation 
定义了对State中数据的修改操作。组件使用State中的数据的时候并不能直接对数据进行修改操作，需要调用Mutation定义的操作来实现对数据的修改。这也是Vuex定义中所说的用相应的规则来让数据发生变化的具体实现
Action 
Mutation中定义的操作只能执行同步操作，Vuex中的异步操作在Action中进行，Action最终通过调用Mutation的操作来更新数据
Module 
Store和State之间的一层，便于大型项目管理，Store包含多个Module，Module包含State、Mutation和Action
使用Vuex
安装Vuex
当我们想在一个vue项目中使用Vuex的话，首先需要先安装Vuex依赖。可以直接利用npm安装：

npm install vuex --save
//加上 --save 表示的是这个依赖在部署之后仍需要
1
2
Store、State和Mutation
在项目的源代码文件夹下（如src文件夹）新建一个store文件夹(叫别的名字也行)。store文件夹下新建一个store.js文件，用来存放Vuex实例。 
假设我们的项目是一个阅读类的应用，需要维护一个叫做books的表示书籍对象的数组。应用可以做的操作是添加新书籍，则其最基本的store.js文件的内容如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    books: [],
  },
  mutations: {
    //所有mutations中的方法的第一个参数一定是state变量，用来进行对state中的状态的操作
    //第二个参数是可选参数，用于调用该 mutations 方法的时候传参
    initBooks (state, books) {
      state.books = books
    },
    addNewBook (state, book) {
      state.books.unshift(book)
    }
  }
})

export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
使用的场景如下： 
在需要使用store中的共有变量的组件中（如newbook.vue），先import store对象。获得store对象的引用，以便后续对其进行操作。
--------------------- 
作者：业余选手李主任 
来源：CSDN 
原文：https://blog.csdn.net/shujh_sysu/article/details/79947418 
版权声明：本文为博主原创文章，转载请附上博文链接！