文章目录
vuex的概念详解
vuex的几个状态和属性
- modules:模块化 vuex
- state 中保存着共有数据,数据是响应式的
- getter 可以对 state 进行计算操作(类似computed),主要用来过滤一些数据,可以在多组件之间复用
- mutations 定义的方法动态修改 state 中的数据,通过 commit 提交方法,方法必须是同步的
- actions 将 mutations 里面处理数据的方法变成异步的,就是异步操作数据,通 store.dispatch 来分发 actions,把异步的方法写在 actions 中,通过 commit 提交 mutations,进行修改数据。
应用流程
- 安装
- 配置
- 使用
1 安装
有2种方式
1. 手脚架预设 选择
2. npm/yarn安装
vue:
npm install vuex@next --save
yarn:
yarn add vuex@next --save
2 配置
建store文件夹 --> 目录下新建index.js,在该文件内进行配置 --> 在main.js中引入
(若使用手脚架,不需要自行配置)
配置store有两种方式,
数据比较少,功能结构简单的可以直接在index.js里配置state、mutation…
数据比较多,结构复杂的可以在index.js里设置modules,
1 直接配置
index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//数据,相当于data
state: {
},
getters: {
},
//里面定义方法,操作state方法
mutations: {
},
// 操作异步操作mutation
actions: {
},
modules: {
},
})
2. modules模块化配置
index.js
import Vue from "vue";
import Vuex from "vuex";
import tab from "./tab"; //引入tab模块 tab.js里的内容写在modules里也可以
Vue.use(Vuex)
const store = new Vuex.Store(
{
modules:{
tab
}
}
)
export default store
tab.js
export default{
state:{
isCollapse:false
},
mutations:{
collapseMenu(state){
state.isCollapse = !state.isCollapse
},
}
在main.js里进行引入
import Vue from 'vue'
import App from './App.vue'
import store from './store/index' //将store对象导入
new Vue({
store, //挂载
render: h => h(App),
}).$mount('#app')
3 使用
1. state //传数据
提供唯一的公共数据源,所有共享的数据统一放到store的state进行储存,相似与data
在vuex中state中定义数据,可以在任何组件中进行调用,不需要再重新引入
有3种调用的方法:
方式1:在标签里直接使用
例子1:
export default new Vuex.Store({
//数据,相当于data
state: {
name:"张三",
age:12,
count:0
},
})
<span>{{ store.state.name }} </span>
方式2:this.store.state.全局数据名称
例子(modules):
export default{
state:{
isCollapse:false
},
mutations:{
collapseMenu(state){
state.isCollapse = !state.isCollapse
},
}
computed:{
isCollapse(){
return this.$store.state.tab.isCollapse //注意modules里的对象的获取方式
}
}
方式3:辅助函数mapState
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性
script中引入辅助函数:
import { mapState } from 'vuex'
computed:{
//通过辅助函数获取store中的state
...mapState(['userName'])
//等价于:下面常规计算属性代码
/* userName (){
return this.$store.state.userName
}*/
}
html里调用:
<div>{{ userName }}</div>
2. mutation //更改数据
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
触发mutaition操作的方式有两种 -->commit和mapMutation
例子
state: {
name: "张三",
age: 12,
count: 0
},
getters:{}
//里面定义方法,操作state方发
mutations: {
addcount(state,num){
state.count += state.count + num
},
reduce(state){
state.count -= state.count - num
}
}
<bottom @="addBtn">增加</bottom>
<bottom @="reduceBtn">减少</bottom>
方式一:使用commit触发
methods:{
//加法
addBtn(){
this.$store.commit("addcount", 10) //每次加十
}
//减法
reduceBtn(){
this.$store.commit("reduce", 10) //每次减十
}
}
方式二:使用mapMutation触发
methods:
...mapMutations(["addcount", "reduce"]),
addBtn() {
this.addcount(10);
}
reduceBtn(){
this.reduce(10);
}
(其他状态和属性待补充和更新)