vuex入门
vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。
1.安装vuex在控制命令行输入
npm install vuex --save
2..新建一个vuex文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state={
count:1
}
const mutations={
add(state){
state.count++;
},
reduce(state){
state.count--;
}
}
//用export default 封装代码，让外部可以引用
export default new Vuex.Store({
state,
mutations
})
实现对vuex中的count进行加减预览。
<template>
<div>
<h2>{{msg}}</h2>
<hr/>
<H3>{{$store.state.count}}</H3>
<!--在count.vue模板中加入两个按钮，并调用mutations中的方法-->
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>
</div>
</template>
<script>
import store from '@/vuex/store'
export default {
name: 'Count',
data(){
return{
msg:'Hello Vue'
}
},
store
}
</script>
state访问状态对象
在文件夹下新建store.js文件，文件中引入我们的vue和vuex。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state={
count:1,
status:'开始'
}
通过$方法赋值
{{$store.state.count}}
通过computed的计算属性直接赋值
直接可以{{count}}-{{status}}获取到state里面的值
computed:{
count(){
return this.$store.state.count;
},
status(){
return this.$store.state.status;
}
}
通过mapState的对象来赋值
我们首先要用import引入mapState
import {mapState} from 'vuex';
然后还在computed计算属性里写如下代码
computed:mapState({
count: state=>state.count,
status: state=>state.status
})
通过mapState的数组来赋值
我们首先要用import引入mapState
import {mapState} from 'vuex';
这个算是最简单的写法了，在实际项目开发当中也经常这样使用。
computed:mapState(["count","status"])
Mutations修改状态
在文件夹下新建store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state={
count:1,
status:'开始'
}
const mutations={
//n是可以传递过来的参数
add(state,n){
state.count+=n;
},
reduce(state){
state.count--;
}
}
export default new Vuex.Store({
state,
mutations
})
$store.commit( )
在Count.vue里修改按钮的commit( )方法传递的参数，我们传递10，意思就是每次加10.
<button @click="$store.commit('add',10)">+</button>
<button @click="$store.commit('reduce')">-</button>
模板获取Mutations方法
<template>
<div>
<h2>{{msg}}</h2>
<hr/>
<H3>{{count}}-{{status}}</H3>
<button @click="add(10)">+</button>
<button @click="reduce">-</button>
</div>
</template>
<script>
import store from '@/vuex/store'
//在模板count.vue里用import 引入我们的mapMutations：
import {mapState,mapMutations} from 'vuex'
export default {
name: 'Count',
data(){
return{
msg:'Hello Vue'
}
},
computed:mapState(["count","status"]),
//在模板的<script>标签里添加methods属性，并加入mapMutations
methods:mapMutations(["add","reduce"]),
store
}
</script>
getters计算过滤操作
getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state={
count:1,
status:'开始'
}
const mutations={
//n是可以传递过来的参数
add(state,n){
state.count+=n;
},
reduce(state){
state.count--;
}
}
//二次编辑给数字后面加上单位
const getters={
count:state=>state.count+"个"
}
export default new Vuex.Store({
state,
mutations,
getters
})
getters基本用法
computed:{
...mapState(["count","status"]),
count(){
return this.$store.getters.count;
}
},
用mapGetters简化模板写法
computed:{
...mapState(["count","status"]),
...mapGetters(["count"])
},
met
actions异步修改状态
actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。
- context：上下文对象，这里你可以理解称store本身。
- {commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state={
count:1,
status:'开始'
}
const mutations={
//n是可以传递过来的参数
add(state,n){
state.count+=n;
},
reduce(state){
state.count--;
}
}
const getters={
count:state=>state.count+"个"
}
const actions={
addAction(context){
context.commit("add",10);
},
reduceAction({commit}){
commit("reduce")
}
}
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
模板中的使用
<template>
<div>
<p>
<button @click="addAction">+</button>
<button @click="reduceAction">-</button>
</p>
</div>
</template>
<script>
import store from '@/vuex/store'
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
name: 'Count',
data(){
return{
msg:'Hello Vue'
}
},
methods:{
...mapActions(["addAction","reduceAction"])
}
}
</script>
module模块组
随着项目的复杂性增加，我们共享的状态越来越多，这时候我们就需要把我们状态的各种操作进行一个分组，分组后再进行按组编写。那今天我们就学习一下module：状态管理器的模块组操作。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state={
count:1,
status:'开始'
}
const mutations={
//n是可以传递过来的参数
add(state,n){
state.count+=n;
},
reduce(state){
state.count--;
}
}
const getters={
count:state=>state.count+"个"
}
const actions={
addAction(context){
context.commit("add",10);
},
reduceAction({commit}){
commit("reduce")
}
}
const modeA={
state,
mutations,
getters,
actions
}
export default new Vuex.Store({
modules:{a:modeA}
})
在模板使用
<h3>{{$store.state.a.count}}</h3>
如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态。写法如下：
computed:{
count(){
return this.$store.state.a.count;
}
},
网友评论