作者:老吴(转载请注明出处)
1、什么Vuex是Vuex我们为什么要使用Vuex?
- 什么是Vuex
说简单通俗一点Vuex就是建立在Vue中的一个类似于数据库的一个模板,为什么要把Vuex叫做数据库呢?是因为Vue里所有的组件都可以访问到Vuex里面的数值。他也类似于本地存储因为他们都可以被组件访问
- 为什么要用Vuex
那么既然有本地存储了那还用Vuex干嘛? 因为Vuex里面包含了很多方法,有存储方法,有存储数据,有计算数据的方法,也有方法异步的方法,所以Vuex彻底完胜本地存储
- 废话不多说咱们开始
2、安装Vuex
- 建议使用vue3脚手架因为在vue3中自带vuex
从第三步骤看吧
- vue2安装步骤
1. npm下载
- 使用
npm i vuex -s
下载到本地2. Vuex创建
- 在
src
文件里面创建一个命名一个叫store
的文件夹- 然后在
store
文件夹里在新建一个名叫index.js
的文件- 然后在
index.js
文件里写入
mport Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {},//存储数据的方法
mutations: {},//用于执行被调用的方法
actions: {},//由于执行异步的方法
});
- 下面我来简述一下常用的方法
3、方法介绍
1. State
- 先在
stale
方法里放入自己定义的属性
//js
state: {
sum:100,
},
- 在html中使用
//html
<template>
{{$store.state.sum}}
</template>
- 在vue里方法使用
//vue
<template>
{{sum}}
</template>
<script>
data(){
return {
sum:this.$store.state.sum
};
}
</script>
2、 Actions
- 执行异步方法的操作
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
actions: {
increment ({ commit }) {
commit('increment')
}
}
- Action 通过 store.dispatch 方法触发:
store.dispatch('increment')
3、 Mutation
- 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
- Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
- 执行方法
this.$store.commit('increment')
- 在
Mutation
方法里可以添加数据
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state,val) {
// 变更状态
state.count=val++
}
}
})
- 执行方法
this.$store.commit('increment',this.sum)
4、总结
适用于有一定vue基础的人群、由于作者是第一次发布文章所以暂时没有此项目的下载地址、如有不足之处欢迎下方评论