对vuex的浅解
vuex是什么?
官网的解释是
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools,extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
而就我浅显的理解是
它类似一个html里面的全局变量,可运用于全局,而vue存储的东西,可以运用于vue所有的组件,方便与组件里面数据的接受与监听。
vuex 在项目中的使用【通过vue-cli 脚手架搭建的项目中】
安装
1
npm install vuex --save
在main.js中 引入
vuex核心概念的使用
//新建一个组件,假设命名为testDemo.vue <template> <div> {{counts}} </div> </template> <script> export default { name: 'testDemo', data () { return { } }, computed:{ //通过计算属性监听vuex里面 count的值 counts(){ return this.$store.getters.getCounts; } }, created(){ setTimeout(()=>{ //action 方法提交 this.$store.dispatch('increment',10) },2000) } } </script>
随后,可以将store在main.js中处理出来,src目录下新建一个文件夹命名为store,新建index.js,actions.js,getters.js,mutation-types.js,mutations.js
//index.js import Vue from 'vue'; import Vuex from 'vuex'; import mutations from './mutations'; import actions from './actions'; import getters from './getters'; Vue.use(Vuex); export const store = new Vuex.Store({ state: { count: 1, }, mutations, actions, getters }); // mutation-types.js export const INCREMENT="INCREMENT"; 19 // action.js import { INCREMENT } from './mutation-types'; export default { [INCREMENT]({ commit, state },value) { commit(INCREMENT,value); }, }; // mutations.js import {
testDemo.vue
<template> <div> {{counts}} </div> </template> <script> export default { name: 'testDemo', data () { return { } }, computed:{ //通过计算属性监听vuex里面 count的值 counts(){ return this.$store.getters['INCREMENT']; } }, created(){ setTimeout(()=>{ //action 方法提交 this.$store.dispatch('INCREMENT',10) },2000) } } </script>
这样以来,逼格就立马高了一些
最后,文件的目录大概就长下图这个样子