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

什么是Vuex？

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

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

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

cnpm 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);

4、在main.js 中引入新建的store.js文件并在实例化的时候使用store对象

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

通过这四步的操作，vuex的准备工作寂静完成啦，接下来请看具体用法和实例。

下面是一个计数器的例子

在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:this.obj,xx:xx}) }

在组建可以通过$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>

over!自己可以亲自试一下看看效果；

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

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

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

文章转载自：https://www.jb51.net/article/146475.htm