师傅领进门，修行在个人，从业这么长时间了，以前一直没咋用过Vuex，最近的一个项目中用到了，特来温习一下，本人理解不深，欢迎指正
vuex的使用
1.下载完成vue项目后，先下载vue依赖
cnpm i vuex
2.在main.js中引入vuex
import Vuex from 'vuex'
Vue.use(Vuex);
3.实例化vuex
const store = new Vuex.Store({
//state定义vuex中的变量(相当于vue中的data)
state: {
count: 0,
count2: 0,
},
//mutations修改vuex的值
mutations: {
increment (state) {
state.count++
}
}
})
4.将vuex定义到全局
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
render: h => h(App),
store//定义vuex到全局
})
页面中的获取
this.$store.state.count
页面修改vuex值
this.$store.commit('increment');
使用计算属性来展示状态，不太明白计算属性的可以自行在官网查看
<template>
<div @click="fnClick">{{str2}}
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
str:this.$store.state.count
};
},
methods:{
fnClick(){
this.$store.commit('increment');
// this.str=this.$store.state.count
}
},
computed: {
str2() {
return this.$store.state.count
}
}
}
</script>
以上呢就可以满足基本的vuex的使用了，如果有想稍微深入一点的请继续往下预览
Getter
上面我们知道了vue有一个计算属性，那么接下来我们介绍一下有关vuex中的计算属性
在state同级下添加getter,添加计算属性
getters: {
doneTodos: state => {
return state.count2=10;
}
}
在页面mounted中查看一下值的变化
this.$store.getters.doneTodos
我们发现值count2变成了10，一般在这里面写一点逻辑性比较强的操作
Action
上面我们看了计算属性，接下来给大家介绍一个异步的操作action，提交的是 mutation，而不是直接变更状态
在state同级下添加Action，添加Action方法后，vuex就可以使用异步的方法了，
main.js
actions: {
increment (context) {
context.commit('increment')
}
},
调用方法
this.$store.dispatch('increment')
Module
在state同级下添加Module
Module方法简单来说就是如果业务庞大，要定义很多的变量的时候，我们为了查看方便，使用的一个方法，模块化（将臃肿的代码块细化）
代码结构没有修改，在外面定义，然后在添加到一个Object里面（小编比较懒，moduleA，moduleB是复制的，所以效果有点问题，测试的时候将moduleA或者moduleB注释一下即可看出效果）
const moduleA={
// 定义变量
state: {
count2: 0,
},
//修改值
mutations: {
increment (state) {
state.count2++
}
},
//异步操作,改变 mutations
actions: {
increment (context) {
context.commit('increment')
}
}
}
const moduleB={
// 定义变量
state: {
count: 0,
},
//修改值
mutations: {
increment (state) {
state.count++
}
},
//异步操作,改变 mutations
actions: {
increment (context) {
context.commit('increment')
}
}
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
页面中获取
this.$store.state.a.count2
这是本人对vuex简单的了解，后续还会出更加复杂一点的操作，有啥不对的地方欢迎指正，谢谢
网友评论