文档章节

Vuex 快速入门 简单易懂

木子晴
 木子晴
发布于 09/08 12:19
字数 1313
阅读 4
收藏 0

一、vuex介绍

(1)vuex是什么?

1. 借鉴 了FluxRedux、 The Elm Architecture

2. 专为 Vue.js 设计 的状态管理模式

3. 集中式存储和管理应用程序中所有组件的状态

4. Vuex 也集成到 Vue 的官方调试工具

5. 一个 Vuex 应用的核心是 store(仓库,一个容器),store包含着你的应用中大部分的状态 (state)

(2)什么情况下我应该使用 Vuex?

1. 不适用:小型简单应用,用 Vuex 是繁琐冗余的,更适合使用简单的 store 模式

2. 适用于:中大型单页应用,你可能会考虑如何把组件的共享状态抽取出来,以一个全局单例模式管理,不管在哪个组件,都能获取状态/触发行为,解决问题如下:

① 多个视图使用于同一状态:

传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力

② 不同视图需要变更同一状态:

采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝,通常会导致无法维护的代码

(3)Vuex 和单纯的全局对象有何不同?

1.Vuex 的状态存储是响应式的

当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

2.你不能直接改变 store 中的状态

改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation,方便我们跟踪每一个状态的变化。

二、vuex安装

* vue cli 3 中搭建脚手架预设时选择了“vuex”后便安装了vuex,可跳过此步阅读

(1)<script>引入

在 Vue 之后引入 vuex 会进行自动安装:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

(2) 包管理

npm install vuex --save //yarn add vuex

在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex: 

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

Vue.use(Vuex)

(3)git clone 自己构建

git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
npm install
npm run build

(4)兼容

Vuex 依赖 Promise。如果你支持的浏览器并没有实现 Promise (如 IE),那么你可以使用一个 polyfill 的库(如  es6-promis)

1.你可以通过 CDN 将其引入,window.Promise 会自动可用:

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

2.包管理器安装:

npm install es6-promise --save //yarn add es6-promise 

然后,将下列代码添加到你使用 Vuex 之前的一个地方:

import 'es6-promise/auto'

三、使用

(1)使用介绍

1.搭建store实例

①. 在创建vuex实例的地方引入vue、vuex,使用vuex:

import Vue from 'vue'//引入vue
import Vuex from 'vuex'//引入vuex

Vue.use(Vuex); //使用 vuex

②. 如果你的actions中用到 store.dispath() ,要引入store

import store from './store' //引入状态管理 store

③. new 一个 Vuex.Store 实例,并注册 state、mutations、actions、getters到 Vuex.Store 实例中

ps. 你可以像上面那样将“属性和值”直接写在实例中,当代码量大时,你也可以分别写个.js文件,如下图:

然后引入到 store/index.js 注册到vuex实例中,如:

2.创建好 vuex.store 后,你需要在入口文件 main.js 中引入 store 并注册到 vue 实例中,这样就可以在任何组件使用store了:

3.在组件中使用:

①. 引入vuex中各属性对应的辅助函数:

import {mapActions, mapState,mapGetters} from 'vuex' //注册 action 、 state 、getter

②. 使用store中的状态数据、方法:

使用方法有很多,这种事最简单实用的,更多可以查看官网学习:https://vuex.vuejs.org/zh/

(2)具体demo

来个简单易懂的计数

eg:store.js

import Vue from 'vue';
import Vuex from 'vuex'; //引入 vuex
import store from './store' //注册store

Vue.use(Vuex); //使用 vuex

export default new Vuex.Store({
    state: {
        // 初始化状态
        count: 0,
        someLists:[]
    },
    mutations: {
        // 处理状态
        increment(state, payload) {
            state.count += payload.step || 1;
        }
    },
    actions: {
        // 提交改变后的状态
        increment(context, param) {
            context.state.count += param.step;
            context.commit('increment', context.state.count)//提交改变后的state.count值
        },
        incrementStep({state, commit, rootState}) {
            if (rootState.count < 100) {
                store.dispatch('increment', {//调用increment()方法
                    step: 10
                })
            }
        }
    },
    getters: {
        //处理列表项
        someLists: state =>param=> {
            return state.someLists.filter(() => param.done)
        }
    }
})

使用时,eg:

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' //引入状态管理 store

Vue.config.productionTip = false

new Vue({
  router,
  store,//注册store(这可以把 store 的实例注入所有的子组件)
  render: h => h(App)
}).$mount('#app')

views/home.vue:

<template>
  <div class="home">
    <!--在前端HTML页面中使用 count-->
    <HelloWorld :msg="count"/>
    <!--表单处理 双向绑定 count-->
    <input :value="count" @input="incrementStep">
  </div>
</template>

<script>
    import HelloWorld from '@/components/HelloWorld.vue'
    import {mapActions, mapState,mapGetters} from 'vuex' //注册 action 和 state

    export default {
        name: 'home',
        computed: {
            //在这里映射 store.state.count,使用方法和 computed 里的其他属性一样
            ...mapState([
                'count'
            ]),
            count () {
                return store.state.count
            }
        },
        created() {
            this.incrementStep();
        },
        methods: {
            //在这里引入 action 里的方法,使用方法和 methods 里的其他方法一样
            ...mapActions([
                'incrementStep'
            ]),
            // 使用对象展开运算符将 getter 混入 computed 对象中
            ...mapGetters([
                'someLists'
                // ...
            ])
        },
        components: {
            HelloWorld
        }
    }
</script>

运行结果:

© 著作权归作者所有

木子晴
粉丝 4
博文 3
码字总数 6508
作品 0
浦东
私信 提问
如何更好的使用module vuex?

一、 前言 在项目如何使用vuex呢?以前我都是非模块末去写的,可能大家和我一样也是这么去写,但是回过头去看看vue的文档,发现模块化去使用vuex更好,vue是单页面应用,其实只有一个页面,那...

cookie-zhang
03/26
0
0
Vuex对比Redux学习Vuex

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wen_special/article/details/88868872 之前接触过react框架中通过redux处理数据流。来到新公司,接触到新框架...

wen_special
03/28
0
0
让你也学会某开源平台的vuex模块化源码应用

先告诉阅读本篇文章的同学本人水平有限,菜鸟一只:smile:。 继上次分享了在vue官方文档的一些小细节,很多大佬说基本操作,不够深,多看看源码 其实本人也只是个小菜鸟,来分享的也是自己学习...

龙小胖
08/19
0
0
[vue中使用typescript] 超实用教程

,尤大说,支持了,网上关于的资料有点少, 楼主踩了一个星期坑,终于摸明白了的玩法,下面我们就来玩下的吧 1,data 值的声明 在这里声明的是公有属性,声明的是私有属性,私有属性要带 蓝色...

z_路遥知马力
06/17
0
0
用150行代码实现Vuex 80%的功能

作者: 殷荣桧@腾讯 本文地址,欢迎查看 本文github仓库代码地址,欢迎star,谢谢。 如果你对自己用少量代码实现各个框架感兴趣,那下面这些你都可以一看: build-your-own-react build-your-...

殷荣桧
02/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

前端技术之:Prisma Demo服务部署过程记录

安装前提条件: 1、已经安装了docker运行环境 2、以下命令执行记录发生在MackBook环境 3、已经安装了PostgreSQL(我使用的是11版本) 4、Node开发运行环境可以正常工作 首先需要通过Node包管...

popgis
今天
5
0
数组和链表

数组 链表 技巧一:掌握链表,想轻松写出正确的链表代码,需要理解指针获引用的含义: 对指针的理解,记住下面的这句话就可以了: 将某个变量赋值给指针,实际上就是将这个变量的地址赋值给指...

code-ortaerc
今天
4
0
栈-链式(c/c++实现)

上次说“栈是在线性表演变而来的,线性表很自由,想往哪里插数据就往哪里插数据,想删哪数据就删哪数据...。但给线性表一些限制呢,就没那么自由了,把线性表的三边封起来就变成了栈,栈只能...

白客C
今天
43
0
Mybatis Plus service

/** * @author beth * @data 2019-10-20 23:34 */@RunWith(SpringRunner.class)@SpringBootTestpublic class ServiceTest { @Autowired private IUserInfoService iUserInfoS......

一个yuanbeth
今天
5
0
php7-internal 7 zval的操作

## 7.7 zval的操作 扩展中经常会用到各种类型的zval,PHP提供了很多宏用于不同类型zval的操作,尽管我们也可以自己操作zval,但这并不是一个好习惯,因为zval有很多其它用途的标识,如果自己...

冻结not
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部