一.什么是vuex
vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。
二. 为什么会有vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
三.vuex相关结论
- 修改state状态必须通过mutations
- mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
- 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
- state的状态即共享数据可以在组件中引用
- 组件中可以调用action
四. vuex怎么使用
(1) 初始化
1.yarn add vuex // 安装到运行依赖
2.main.js中写如下代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex)
const store = new Vuex.Store({}) // 写配置项
new Vue({
el: '#app',
store
})
(2)配置项属性介绍
1.state
作用:放置所有公共状态的属性
定义state
// 初始化vuex对象
const store = new Vuex.Store({
state: {
// 管理数据
count: 0
}
})
如何在组件中获取count?
1.使用this.$store获取vuex的store对象实例
this.$store.state.count
调用实例
<div> state的数据：{{ $store.state.count }}</div>
2.辅助函数 - mapState
import {mapState} from 'vuex'
computed: {
...mapState(['count'])
}
调用实例
<div> state的数据：{{ count }}</div>
2.mutation
作用:同步更新数据
定义mutation
mutations: {
addCount(state,payload) {
state.count += payload
}
触发mutations的第一种方式
this.$store.commit('addCount',10)
调用实例
<button @click="addCount(10)">+100</button>
触发mutation的第二种方式
import {mapMutations} from 'vuex'
methods: {
...mapMutations(['addCount'])
}
调用实例
<button @click="addCount(10)">+100</button>
3.actions
作用:执行异步操作
actions: {
getAsyncCount(context) {
setTimeout(function() {
context.commit('addCount',123)
},1000)
}
}
# context表示当前的store的实例
context.state 获取状态
context.commit 提交mutations
context.diapatch 调用其他的action
原始调用-$store
addAsyncCount () {
this.$store.dispatch('getAsyncCount')
}
传参调用
addAsyncCount () {
this.$store.dispatch('getAsyncCount', 123)
}
辅助函数 -mapActions
actions也有辅助函数，可以将action导入到组件中
import { mapActions } from 'vuex'
methods: {
...mapActions(['getAsyncCount'])
}
直接通过 this.方法就可以调用
<button @click="getAsyncCount(111)">+异步</button>
getters
作用:从state中派生出一些状态
定义getters
getters: {
// getters函数的第一个参数是 state
// 必须要有返回值
filterList: state => state.list.filter(item => item > 5)
}
使用getters
原始方式 -$store
<div>{{ $store.getters.filterList }}</div>
辅助函数 - mapGetters
import { mapGetters } from 'vuex'
computed: {
...mapGetters(['filterList'])
}
<div>{{filterList}}</div>
(3)vuex 中的模块化
1为什么会有模块化
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
2 模块化的简单应用
const store = new Vuex.Store({
modules: {
user: {
state: {
token: '12345'
}
},
setting: {
state: {
name: 'Vuex实例'
}
}
})
3.获取方式
方式一
$srore.state.模块名称.属性名
方式二
getters: {
token: state => state.user.token,
name: state => state.setting.name
}
通过mapGetters引用
computed: {
...mapGetters(['token', 'name'])
}
4.模块化中的命名空间
user: {
namespaced: true,
state: {
token: '12345'
},
mutations: {
// 这里的state表示的是user的state
updateToken (state) {
state.token = 678910
}
}
},
方案1：直接调用-带上模块的属性名路径
test () {
this.$store.commit('user/updateToken') // 直接调用方法
}
方案2：辅助函数-带上模块的属性名路径
methods: {
...mapMutations(['user/updateToken']),
test () {
this['user/updateToken']()
}
}
<button @click="test">修改token</button>
方案3： createNamespacedHelpers 创建基于某个命名空间辅助函数
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')
methods: {
...mapMutations(['updateToken'])
}
<button @click="updateToken">修改token2</button>
