Vuex 使用及简单实例(计数器)

时间:2021-05-26

前一段时间因为需要使用vue,特地去学习了一下。但是时间匆忙vuex没有接触到,今天闲暇时看了解了一下vuex,并做了一个小demo,用于记录vuex的简单使用过程。

什么是Vuex?

vuex是专门为vue.js应用程序开发的一种状态管理模式,当多个视图依赖于同一个状态或是多个视图均可更改某个状态时,将共享状态提取出来,全局管理。

引入Vuex(前提是已经用Vue脚手架工具构建好项目)

1、利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了。

npm install vuex --save

要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的。

2、新建一个store文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex。

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

3、使用我们vuex,引入之后用Vue.use进行引用。

Vue.use(Vuex);

通过这三步的操作,vuex就算引用成功了,接下来我们就可以尽情的玩耍了。

4、在main.js 中引入新建的vuex文件

import storeConfig from './vuex/store'

5、再然后 , 在实例化 Vue对象时加入 store 对象 :

new Vue({ el: '#app', router, store,//使用store template: '<App/>', components: { App } })

下面是一个计数器的例子

在src目录下创建一个store文件夹。

src/store.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0, show: '' }, getters: { counts: (state) => { return state.count } }, mutations: { increment: (state) => { state.count++ }, decrement: (state) => { state.count-- }, changTxt: (state, v) => { state.show = v } }})export default store

state就是我们的需要的状态,状态的改变只能通过提交mutations,例如:

handleIncrement () { this.$store.commit('increment') }

带有载荷的提交方式:

changObj () { this.$store.commit('changTxt', this.obj) }

当然了,载荷也可以是一个对象,这样可以提交多个参数。

changObj () { this.$store.commit('changTxt', { key:'' }) }

在main.js中引入store.js

import store from './store/store'export default new Vue({ el: '#app', router, store, components: { App }, template: '<App/>'})

在组件中使用

在组建可以通过$store.state.count获得状态

更改状态只能以提交mutation的方式。

<template><div class="store"> <p> {{$store.state.count}} </p> <el-button @click="handleIncrement"><strong>+</strong></el-button> <el-button @click="handleDecrement"><strong>-</strong></el-button> <hr> <h3>{{$store.state.show}}</h3> <el-input placeholder="请输入内容" v-model="obj" @change="changObj" clearable> </el-input></div></template><script>export default { data () { return { obj: '' } }, methods: { handleIncrement () { this.$store.commit('increment') }, handleDecrement () { this.$store.commit('decrement') }, changObj () { this.$store.commit('changTxt', this.obj) } }}</script>

到这里这个demo就结束了,

感觉整个个过程就是一个传输数据的过程,有点类似全局变量,但是vuex是响应式的。

这里当然并没有完全发挥出全部的vuex,

vuex还在学习中,写这篇文章主要是记录其简单的使用过程。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章