前一段时间因为需要使用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还在学习中，写这篇文章主要是记录其简单的使用过程。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。