今天我们简单说一下 vuex 的使用,vuex 是什么呢,相当于 react 的 redux,如果项目使用数据过多的话,直接管理是非常不方便的,那么采用 vuex,那些繁琐的问题就迎刃而解了,首先我们先看看官方对 vuex 的说明:
Vuex 是一个专为 vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试,状态快照导入导出等高级调试功能.
说白了就是 vue 的状态管理,你只需要每次动态的改变这些状态就行,数据就会自动渲染,从第一步安装开始,
1,安装 vue 项目:
(1).vue init webpack Testporject
(2).cd Testporject
(3).npm i vuex --save
(4) npm run dev
这些指令就不用说了,作为一个 vue 开发者,如果不知道的话那就可以不用学了,前提是你需要依赖 vue-cli,如果安装失败,那请先安装 vue-cli 吧
2,vuex 的引入
项目安装成功以后,初始的文件目录格式都是一样的,像我这样:
然后我们简单的使用,在 main.js 中引入 vuex
javascript 代码效果预览
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vues)
记得一定要挂在使用它,就是这一句:Vue.use(Vuex)
3,在 main.js 中加入
javascript 代码效果预览
var store = new vuex.Store({//store对象
state:{
count:0
}
})
4,把刚才的 store 对象实例化到 Vue 中
javascript 代码效果预览
new Vue({
el: '#app',
router,
store,//加入store对象
template: '<App/>',
components: { App }
})
完成这一步我们就可以使用了,一个简单的 vuex 的 state 就可以了,怎么用呢
html 代码效果预览
<div id="hello">
<p>{{$store.state.count}}</p>
</div>
5,很明显,刚才只是简单的一例子,如果你需要做大型的项目,不可能把 store 对象写在 main.js 里,这样是非常不方便管理的,所以我们需要在 src 下新建一个文件夹 store 专门存放 store 对象,然后我们新建一个文件 index.js
javascript 代码效果预览
//index.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default new vuex.Store({
state:{
count:0
}
})
相应的 main,js 就需要做修改了
javascript 代码效果预览
import store from './store/index'
new Vue({
el: '#app',
router,
store,//加入store对象
template: '<App/>',
components: { App }
})
这样做就是为了把 store 对象分离出去,方便管理,但是你会发现这个 store 对象是全局的所有组件都可以使用,如果我们的组件多了,数据多了,全部堆放在一起,是不是特别臃肿,所以现在我们就该使用 modules
首页我们新建一个 js 文件存放一个组件可能用到的 store 对象,比如我新建 heade.js, 在这里我们不需要引用 vuex 了,只需要默认 export default 就行了
javascript 代码效果预览
//heade.js
export default {
state: {
count: 0
}
}
然后我们把在 index.js 中使用 modules
javascript 代码效果预览
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
import HeadeStore from './heade';//引入刚才的heade.js
export default new vuex.Store({
modules: {
Heade: HeadeStore
}
})
现在我们管理起来就方便多了,比如还有其他的呢我们放在 modules 下就可以了,比如,我们除了 heade.js 里管理的是一个组件的 store 对象,我们还有一个 content.js 来管理另外一个组件的 store 对象,那么我们在 store 文件夹下载新建一个 content.js, 和 heade.js 一样,只需要默认输出就可以了
javascript 代码效果预览
//content.js
export default {
state: {
cont: '这是content内容'
}
}
然后我们在 index.js 中引入挂在 modules 下就可以啦
javascript 代码效果预览
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
import HeadeStore './heade';//引入刚才的heade.js
import ContentStore from './content' //引入content.js
export default new vuex.Store({
modules: {
Heade: HeadeStore,
Content: ContentStore
}
})
这样是不是方便多了,但是怎么用呢,很简单,现在需要通过 modules 去找他,之前的方法:$store.state.count 改成 $store.state.Heade.count 就行了,很明显这是找到了 heade.js 下的 count 值,那么找 content.js 下 cont 的值呢?一样的,换一下 modules 的名就行 $store.state.Heade.cont
html 代码效果预览
//heade组件
<p>{{$store.state.Heade.count}}</p>
html 代码效果预览
//content组件
<p>{{$store.state.Heade.cont}}</p>
输出结果分贝为:0,这是 content 内容
6,那么接下来你绝的问题解决了吗,难道你们的项目组件所有的状态都用这一个,那如果我需要动态的改变他的状态呢,怎么办?没事,这不 mutations 来了吗,问题就好多了, 怎么用呢,这是干嘛的呢,说白了就是动态的改变 state 的值完成页面的同步渲染,看看用法吧,直接在 state 对象后面加就行了
javascript 代码效果预览
//heade.js
export default {
state: {
count: 0
},
mutations: {
Count (state) {
state.count =1
}
}
}
解释一下,mutations 对象是函数,默认传值是 state,也就是上面的 state,所以可以直接操作 state.count
怎么用呢,很简单,比如页面有一个按钮,点击改变 state 的 count
html 代码效果预览
//
<a href="javascript:;" @click="$store.commit('Count ')">click</a>
此时页面渲染为 1,这是 content 内容
commit('Count') 调用 mutations 的固定方法,参数为 mutations 的方法名,当然 commit 不止传一个参数,也可以传很多,比如:
click [/code] 可以在 heade.js 的 mutations 下 Count 方法接受它
javascript 代码效果预览
//heade.js
export default {
state: {
count: 0
},
mutations: {
Count (state,n) {
state.count =state.count+n
}
}
}
此时输出结果为 10,这是 content 内容
到这一步为止,我们已经可以正常的动态的修改 state 来渲染在页面了,你会发现,mutations 是同步的,只要你在一个组件执行 mutations 的方法了,那所有的组件只要用到 mutations 的方法都会同步进行改变,这并不是我们想要的结果,所以,actions 来解决问题了,写法一样,
javascript 代码效果预览
//heade.js
export default {
state: {
count: 0
},
mutations: {
Count (state,n) {
state.count =state.count+n
}
},
actions: {
Acount (context) {
context.commit('Count ')
}
}
}
接着解释,actions 和 mutations 的写法一样,都是函数,但是 actions 的默认参数是 context,context.commit('Count') 的意思是触发 mutations 下的 Count 函数,那么怎么触发 actions 的函数呢,方法就是
html 代码效果预览
//heade组件
<a href="javascript:;" @click="$store.dispatch('Acount')">click</a>
官方推荐 , 将异步操作放在 action 中
还有一个属性我觉得也没有必要说了,getters, 解释一下它的作用
getters 和 vue 中的 computed 类似 , 都是用来计算 state 然后生成新的数据 (状态) 的.比如我们 heade.js 的 state 有一个值 show:false getters 就是计算与 false 相反的,但是它计算的值是不能直接修改的, 需要对应的 state 发生变化才能修改.
javascript 代码效果预览
//heade.js
export default {
state: {
count: 0,
show: false
},
mutations: {
Count (state,n) {
state.count =state.count+n
}
},
actions: {
Acount (context) {
context.commit('Count ')
}
},
getters:{
not_show(state){
return !state.show;
}
},
}
它也是默认接受 state
最逗一点就是为了方便操作开发,一般情况 $store.state.Heade.show,$store.state.show 写起来不是很方便,那么 vuex 的辅助函数 mapState,mapGetters,mapActions 就可以解决这个问题,办 stroe 对象那个映射到 this
javascript 代码效果预览
<template>
<div class="Heade">
<p>{{msg}}</P>
</div>
</template>
<script>
import {mapState} from 'vuex';
export default {
name: 'Heade',
data () {
return {
msg: ''
}
},
computed:{
//这里的三点叫做 : 扩展运算符
...mapState([
count:state=>state.Heade.count
]),
},
created () {
this.msg = this.count
}
}
</script>
现在我们就直接可以用 this.count 去找到 state 下 count 的值了,created 方法是页面刚载入加载完事执行的方法,完后动态的赋值给 msg,mapState 一般放在 computed 计算属性中,mapActions 一般放在 methods 下,
到这一步为止 vuex 的学习使用就结束了,你可以尽情的去操作数据了,也不用担心会混乱,如果您连我写的文档都看不懂,那你不适合学习 vue,放弃吧!
以上教程全部原创,手打,难免有错误的地方,请各位指正!
来源: http://www.qdfuns.com/notes/32387/7f91aee4cd00022022a295449a0f4305.html