记录一下最近使用vue的一些使用方法
创建项目
通过命令行的方式创建一个vue-cli项目
vue create my-project
可以选择默认的,也可以选择第二个来选择自己项目中需要添加的一些插件,比如vue-router,vuex等插件,按空格键选择你需要安装的插件
选择完插件之后,就一直回车就行了,直至创建完项目
创建完项目之后,在命令行进入你的项目文件夹,执行npm run serve打开你的项目,启动完项目在浏览器打开输入http://localhost:8080/即可看到你项目启动之后的页面
如上图,就表示你的项目已经创建完毕了.
也可以通过运行vue ui命令来查看vue的图形化界面
使用vueX
vuex的介绍,以及各个属性的功能
VueX是适用于在Vue项目开发时使用的状态管理工具,可以用来存储数据,传值等操作,vuex的核心概念分为State,Getter,Mutation,Action,Module
state是vuex的数据源,相当于单个vue文件中的data属性
Getter是vuex在用来监听state数据发生改变,相当于单个vue文件中的computed来监听数据的变化
Mutation是用来改变state的数据,用来写一些方法,相当于单个vue文件中的methods方法
Action类似于mutation,但不同的是,Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。所以可以通过在Action中写一些请求等等
Module用来给vuex来分模块,如果项目过于庞大,所有的状态都放在一个vuex文件中的话,就显得很臃肿,所以使用Module来给vuex来划分各个模块,每个Module中都有对应的vuex的属性,State,Getter,Mutation,Action
vuex的使用
如果之前创建项目的时候使用的是第二种,不是选择默认的,那就可忽略这步,因为创建vue-cli项目的时候已经选择并添加了vuex,系统已经帮我们把文件夹已经创建好了,如使用的是默认的,继续往下看
首先,先创建store文件夹,再创建index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
创建完项目之后,找到main.js文件,并引入该文件
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
在vuex文件夹中添加数据,也就是store下面的index.js文件中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num:0
},
mutations: {
},
actions: {
},
modules: {
}
})
在vue文件中获取刚才刚才添加的数据num
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<p>vuex中的num:{{$store.state.num}}</p>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'Home',
data() {
return {
}
}
}
</script>
<style lang="sass" scope>
</style>
使用vuex中的Mutation来操作数据,完成一个num加1的操作
/*home.vue文件*/
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<p>vuex中的num:{{$store.state.num}}</p>
<button @click="handleClick">给vuex中的num加1</button>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'Home',
data() {
return {
}
},
methods:{
handleClick(){
this.$store.commit('addNum', 1)
}
}
}
</script>
使用this.$store.commit(‘addNum’, 1)来触发vuex中mutations里面的addNum方法
this.$store.commit传2个参数,第一个是方法名(必传),第二个是你要传的参数,可不传
/* store/index.js 文件 */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num:0
},
mutations: {
addNum(state,data){
state.num+=data
}
},
actions: {
},
modules: {
}
})
mutations里面的方法接收2个参数,一个是state对象,另外一个是你commit传过来的参数
完成后大概如上图
vuex中modules的使用
现在我们开始划分模块,比如需要一个banner模块和user模块
首先,我们先在store文件夹下创建一个modules文件夹并且在该文件夹下分别新建一个banner.js文件和user.js文件,然后在store/index.js中引入这两个刚才新建的js
// user.js
const state={
name:'user模块'
}
const mutations={
}
const actions={
}
export default{
namespaced: true,
state,
mutations,
actions
}
// banner.js
const state={
name:'banner模块'
}
const mutations={
}
const actions={
}
export default{
namespaced: true,
state,
mutations,
actions
}
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import banner from './modules/banner'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
banner,
user
}
})
在页面上获取
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<p>vuex中user模块的name:{{$store.state.user.name}}</p>
<p>vuex中banner模块的name:{{$store.state.banner.name}}</p>
</div>
</template>
查看效果
使用modules完成点击加1功能
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<!-- <p>vuex中的num:{{$store.state.num}}</p> -->
<p>vuex中user模块的num:{{$store.state.user.num}}</p>
<p>vuex中banner模块的num:{{$store.state.banner.num}}</p>
<button @click="handleClickUser">给vuex中user模块的num加1</button>
<button @click="handleClickBanner">给vuex中banner模块的num加1</button>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'Home',
data() {
return {
}
},
mounted(){
console.log(this.$store)
},
methods:{
handleClickUser(){
this.$store.commit('user/addNum', 1)
},
handleClickBanner(){
this.$store.commit('banner/addNum', 1)
}
}
}
</script>
// banner.js
const state={
name:'user模块',
num:0
}
const mutations={
addNum(state,data){
state.num+=data
}
}
const actions={
}
export default{
namespaced: true,
state,
mutations,
actions
}
//user.js
const state={
name:'banner模块',
num:0
}
const mutations={
addNum(state,data){
state.num+=data
}
}
const actions={
}
export default{
namespaced: true,
state,
mutations,
actions
}
效果如下图
说下vuex中Action的使用
修改home.vue文件中的代码,
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<!-- <p>vuex中的num:{{$store.state.num}}</p> -->
<p>vuex中user模块的num:{{$store.state.user.num}}</p>
<button @click="handleClickAction">使用Action</button>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'Home',
data() {
return {
}
},
mounted(){
console.log(this.$store)
},
methods:{
handleClickAction(){
this.$store.dispatch('user/testAction', 5)
}
}
}
</script>
通过dispatch来派发一个action,第一个参数为对应模块下actions里面的方法,第二个参数为给actions里面的方法传的参数
修改user.js
// user.js
const state={
name:'user模块',
num:0
}
const mutations={
addNum(state,data){
state.num+=data
}
}
const actions={
testAction(context,payload){
const {commit} = context
commit('addNum',payload)
// 这里面也可以写请求之类的 ...
// 比如这边来请求一个登陆接口
// return new Promise((resolve, reject) => {
// login().then(response => {
// 请求成功之后的demo写在这里
// resolve()
// }).catch(error => {
// reject(error)
// })
// })
}
}
export default{
namespaced: true,
state,
mutations,
actions
}
使用vuex-persistedstate插件来实现vuex的数据持久化
由于vuex的数据都在本地,所以只要浏览器一强制刷新,数据就会没有了,所以需要用到vuex-persistedstate插件来实现vuex的数据持久化
// 先在项目里下载vuex-persistedstate插件
npm i -S vuex-persistedstate
下载完成后在 store/index.js里面引入并使用
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import user from './modules/user'
import banner from './modules/banner'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
banner,
user
},
plugins: [createPersistedState({
getState (states){}
}
)]
})
这样写就可以了,默认是会存储到localStorage来实现数据的持久化,如果不想使用localStorage;来存储数据,请看官方api来稍作调整即可,
现在vuex的使用到这里就基本结束了,我也刚学,说的不好的地方请留言,谢谢
mapState的用法
在vue文件中导入
import { mapMutations,mapState,mapActions} from ‘vuex’
使用mapState
在vue文件中计算属性中设置
computed: {
...mapState({
orderItem: state => state.order.orderItem,
name: state => state.order.name
})
},
create(){
console.log(this.name)
}
使用mapActions
在vue文件中方法中设置
methods: {
...mapActions('order', ['transferEnforces']),
},
create(){
this.transferEnforces().then(res=>{
console.log(res)
})
}
使用mapMutations
在vue文件中方法中设置
methods: {
...mapMutations('order', ['setCoin']),
},
create(){
this.setCoin()
}
365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
