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

前一段时间因为需要使用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: '',

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

})

在组件中使用

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

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

{{$store.state.count}}

+

-

---

{{$store.state.show}}

placeholder="请输入内容"

v-model="obj"

@change="changObj"

clearable>

export default {

data () {

return {

obj: ''

}

},

methods: {

handleIncrement () {

this.$store.commit('increment')

},

handleDecrement () {

this.$store.commit('decrement')

},

changObj () {

this.$store.commit('changTxt', this.obj)

}

}

}

到这里这个demo就结束了，

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

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

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

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