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

更新时间：2020-07-23 14:54:01 作者：startmvc

前一段时间因为需要使用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: '<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就结束了，