vuex说白了就是vue中的数据管理仓库,为开发者的数据操作,例如购物车类似的操作,带来了极大的便捷,最近也在使用vuex整理了如下的学习心得,希望能帮大家解决问题.
vuex的基础使用
1.下载好vue.js和vuex.js文件,并引入到html页面中去
2.对vuex的基础配置
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
increment:function (state) {
state.count++;
},
descrement:function (state) {
state.count--
}
}
});
store是新创建vuex中对的store对象
state是专门来管理数据的仓库
mutations是用来处理各种判断,异步请求,流程控制,也就是说要干什么事情,在这里监听了两个action名,只有接受到相对应的action名,就会触发函数,对state中的count进行操作
3.html代码
<div id="app">
count的值:{{count}} <p><button @click="increment">count加1</button></p>
<p><button @click="descrement">count减1</button></p>
<p><button @click="checkAsyncAdd">延迟加1</button></p>
<p><button @click="checkAsyncOdd">延迟减1</button></p>
<p></p></div>每一个按钮绑定一个事件,实现对count的改变
4.vue实例中代码的编写
new Vue({
computed:{
count(){ return store.state.count
}
},
methods:{
increment:function () {
store.commit("increment")
},
descrement:function () {
store.commit("descrement")
},
checkAsyncAdd:function () {
setTimeout(function () {
store.commit("increment")
},1000)
},
checkAsyncOdd:function () {
setTimeout(function () {
store.commit("descrement")
},1000)
}
}
}).$mount("#app")使用计算属性来实时元素标签更新对state.count中的引用,(因为state是一个对象,那么count就是其属性,所以在vuex的store中count变化,由于是地址引用,那么count就在全局进行变化)
increment函数执行通过store中的commit属性发送"increment"action名,就可以实现了state中count的改变,其他的方法类似
在vue项目中使用vuex
1没有安装vuex就使用cnpm/npm i vuex -D 安装好vuex
2.创建store.js文件(随便创建在哪个目录下,我推荐跟main.js在同一目录下),设置如下内容
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex); //全局使用vuexconst state = { //定义数据仓
count :10};
const mutations = { //处理数据(状态)变化
ydb(state){ //"ydb"和"ydb1"都是action名
state.count++;
},
ydb1(state){
state.count--;
}
};
const actions= {
increment:({commit})=>{ //"increment"是接受前端页面传过来的事件名,下面的也是
commit("ydb") //发送actions名,下面类似 },
descrement:({commit})=>{
console.log(arguments);
commit("ydb1");
},
checkOdd:({commit,state})=>{ if(state.count%2===0){
commit("ydb")
}
},
checkAsync:({commit})=>{ new Promise((resolve)=>{
setTimeout(function () {
commit("ydb");
resolve();
},1000)
})
}
};
const getters = { //设置仓库数去获取对象,方便页面获取仓库中的值
count:function () { return state.count
}
};
export default new Vuex.Store({ //导出一个新的vuex.Store对象 state,
actions,
mutations,
getters //并返回定义好的各种功能对象,注意名称必须按照我这样子写,如state写成states会报错})
3 在项目主文件main.js中引入vuex
import Vue from 'vue'import App from './App.vue'//import Loading from './components/loading/index'import store from './store' //引入创建好的store对象//Vue.use(Loading);new Vue({
store,
el: '#app',
render: h => h(App)
})4.APP.vue文件中编写如下代码
<template>
<div id="app">
<p @click="get">welcome to 蚂蝗俱乐部</p>
<Loading ></Loading>
{{count}} <p><button @click="increment">count加1</button></p>
<p><button @click="descrement">count减1</button></p>
<p><button @click="checkOdd">偶数才能点击+</button></p>
<p><button @click="checkAsync">点击异步+</button></p>
</div></template><script>import {mapGetters,mapActions} from "vuex" //通过es6中的语法,对vuex进行解构赋值,注意名称必须这样写 关于es6的更多介绍,请查看我其他随笔export default {
name: 'app',
data () { return {}
},
computed: { //第一种写法:获取在main.js中全局使用store中state中count的值 ...mapGetters([ 'count'
])
},// computed:mapGetters( //第二种写法:作用同上// ['count']// ), methods: {
...mapActions([ //第一种写法:向store对象中的actions发送事件名
'increment', 'descrement', "checkOdd", "checkAsync"
]),
get(){
alert(1)
}
},// methods:mapActions([ //第二种写法:向store对象中的actions发送事件名// 'increment', 'descrement', "checkOdd", "checkAsync"// ]), }</script><style></style>vuex模块化
个人感觉使用vue项目中使用vuex的方法,所有东西都在store.js中,这样页面显的比较代码拥堵,在官网中,作者提供了vuex模块化的思路,自己也把上面的代码改造了一下,实现了一个小的demo
1.在vue项目中创建store文件夹,创建如下文件
actions.js相当于之前的actions对象,用来监听不同的事件名来发送不同的actions名
import * as types from './types' //导入actions名集合import state from './module'//导入数据仓库export default { //到处一个发送actions名的对象 increment:({commit})=>{ //"increment"为前端页面在mapActions中传递过来的事件名,监听到就发送对应的actions名,下面的类似 commit(types.YDB); }, descrement:({commit})=>{ commit(types.YDB1); }, checkOdd:({commit})=>{ if(state.count%2===0){ commit(types.YDB); } }, checkAsync:({commit})=>{ new Promise((resovle)=>{ setTimeout(function () { commit(types.YDB); resovle() },1000) }) }} |
getters.js相当于之前的getters对象
export default { //返回数据仓库中的count值 count:(state)=>{ return state.count }} |
index就是主文件,负责到处vuex所必须要的配置好之后的对象
import Vue from 'vue'import Vuex from 'vuex'import mutations from './mutations'import actions from './actions'Vue.use(Vuex); //全局使用vuexexport default new Vuex.Store({ actions, modules:{ mutations //这里的mutations里面包含了多个对象,使用modules可以转化格式导出 }})//导出配置好的vuex对象 |
module.js相当于之前的state对象,用来存放数据,就是一个数据仓库
const state = { count:20};export default state //导出数据仓库 |
types.js其实在官方中是没有的,但是大多数人的项目中是用的,一般用来放置一些acction名集合
| 12 | export const YDB = "YDB";export const YDB1 = "YDB1"; |
如上所示,已经成功的把vuex模块化,这样不同的操作,只需要找到不同的js文件就可以进行处理,更符合模块化开发
其中main.js中的内容如下
import Vue from 'vue'import App from './App.vue'import Loading from './components/loading/index'import store from './store/index' //引入store文件夹中的index主文件Vue.use(Loading);new Vue({ store, //全局使用 el: '#app', render: h => h(App)}) <br><br><br>//注 APP.vue中的代码没有发生任何改变 |