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')