当前位置：首页 > news >正文

vuex视频教程

news 来源：原创 2024/5/5 11:30:57

参考：https://jspang.com/post/vuex.html

总结：不要过渡使用vuex，能使用参数传递，尽量使用参数传递。

1、Vuex基本介绍
数据仓库，状态管理器。
以前是用session操作。

学习基础：Router vue-cli
安装：$ npm install vuex --save

2、项目创建
创建基础项目
$ vue init webpack vuex
? Project name (vuex)
? Project name vuex
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (wang <weiwei@163.com>)
? Author wang <weiwei@163.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

3、部署vuex环境
创建项目目录：vuex/store.js文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const state={
count: 0
}

//改变state值，必须调用mutations方法
const mutations={
add(state,n){
state.count+=n;
},
reduce(state){
state.count--;
},
reset(state){
state.count=0;
}
}

export default new Vuex.Store({
state
})

创建components/Count.vue组件。
<template>
<div class="hello">
<h1>{{ msg }}</h1><hr>
<h2>{{$store.state.count}}=====>{{count}}</h2>
<p>
<button @click="$store.commit('add',10)">+</button>
<button @click="reduce">-</button>
<button @click="$store.commit('reset')">reset</button>
</p>
</div>
</template>

export default {
data () {
return {
msg: 'Hello Vuex !'
}
},
computed:{
...mapState(['count']),
},
store
}
</script>

配置路由
import Count from '@/components/Count'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
component: HelloWorld
},{
path: '/count',
component: Count
}
]
})

访问方式：http://localhost:8080/#/count
点击“+”自增1，“-”自减1,RESET重置归零。

4、修改状态值
Getters，actions同步异步修改访问。
const getters={
count:function(state){
return state.count+=100;
}
}

//异步修改数据
const actions={
addAction(context){
context.commit('add',10);
//配置延迟3秒减1，测试。
setTimeout(()=>{context.commit('reduce')},3000);
console.log('我比reduce先执行了!')
},
reduceAction({commit}){
commit('reduce');
}
}
export default new Vuex.Store({
state,mutations,getters,actions
})

完善配置Count组件。
<template>
<div class="hello">
<h1>{{ msg }}</h1><hr>
<h2>{{$store.state.count}}=====>{{count}}</h2>
<p>
<button @click="$store.commit('add',10)">+</button>
<button @click="reduce">-</button>
<button @click="$store.commit('reset')">reset</button>
</p>
<p>
<button @click="addAction">+</button>
<button @click="reduceAction">-</button>
</p>
</div>
</template>

export default {
data () {
return {
msg: 'Hello Vuex !'
}
},
computed:{
...mapState(['count']),
//...mapGetters(['count'])
},
methods:{
...mapMutations(['add','reduce']),
...mapActions(['addAction','reduceAction']),
},
store
}
</script>