59 Vuex

59 Vuex

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

安装

新建项目

如果是新建项目，可以在 Vue CLI 搭建 时选中 Vuex

选择特性

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel # 这是一个 JS 转译的工具
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 (*) Vuex
 (*) CSS Pre-processors # CSS 预处理器，如 sass、less
 (*) Linter / Formatter # 保障代码规范的工具，如 ESLint
 ( ) Unit Testing
 ( ) E2E Testing

其他的操作与搭建 Vue CLI 一致

新增 Vuex

如果是在已有项目中新增 Vuex

NPM

$ npm install vuex --save

文件配置

在原项目中新增路由还需要手写框架

index.js

在 src 目录下创建 vuex文件夹，在 vuex文件夹下创建 index.js 文件，通过 Vue.use() 明确地安装路由功能

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(VueRouter)

const store = new Vuex.Store ({
    state: {},
    mutations: {},
    getters: {},
    actions: {},
    modles: {}
})

export default store

state：唯一数据源，存储数据

getters：计算属性，相当于组件中的 computed

mutations：更改 state 中状态的唯一方法是提交 mutation

actions：类似于 mutations，不同在于

• action 提交的是 mutation，而不是直接变更状态
• action 可以包含任意异步操作

modules：用于将 store 分割成模块，每个模块拥有自己的 state、mutation、action、getter,甚至是嵌套子模块

main.js

在 main.js 引入模块

import store from './vuex'

在实例化 Vue 新增 store

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')