https://vuex.vuejs.org/zh/guide/actions.html
强制数据渲染:this.$forceUpdate();
(1)主要格式
(1.1)store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 全局变量
state: {
},
// 获取仓库数据的方法(有点类似计算属性, 降低代码冗余程度)
getters:{
},
// 修改数据的方法(同步)
mutations: {
},
// 修改数据的方法(异步)
actions: {
},
// 将Vuex分模块化
modules: {
}
})
export default store
(1.2)在 mian.js 定义全局变量
// store
import store from './store'
Vue.prototype.$store = store
(2)获取 state 全局变量
(2.1)
const store = new Vuex.Store({
state: {
baseUrl:'https://ismart.loongtek.cn/api-user',
},
})
export default store
(2.2)直接调用变量
import store from "@/store/index.js";
// state 变量
store.state.baseUrl
// 直接引用
this.$store.state.baseUrl
// 页面中计算属性
computed:{
newBaseUrl() {
return this.$store.state.baseUrl
}
}
// mapState 辅助函数, 可以快速引入 store 中的值
import { mapState } from "vuex";
export default {
// 引入vuex 的 store 中的state值, 必须在计算属性中书写!
computed: {
// 此处的 baseUrl 代表, store 文件中的 state 中的 baseUrl
...mapState(["baseUrl"])
// 变量名不一致时
...mapState({
newBaseUrl:state => state.baseUrl
})
},
{{ baseUrl }}
this.baseUrl
(3)getters 方法 获取 state 全局变量
(3.1)
const store = new Vuex.Store({
state: {
nowParkId: null,
students:[
{id:110,name:'zhangsan',age:18},
{id:111,name:'lisi',age:21},
{id:112,name:'wangwu',age:30},
]
},
getters:{
getNowParkId(state){
// 类似计算属性,所以这一般都是有一些操作的,不然可以用(2)中的方式调用变量
return state.nowParkId
},
// getters默认是不能传递参数的, 这里传入 age , {{ getmoreAge(30) }}
getmoreAge(state){
return function(age){
return state.students.filter(s => s.age >= age)
}
}
},
},
})
export default store
(3.2)
// getters 方法 (获取 state 变量 nowParkId 的值)
this.$store.getters.getNowParkId
this.$store.getters.getmoreAge(30)
(4)Mutations 修改 state 全局变量的值
可带参数,可不带参数
(4.1)
mutations: {
updataNowParkId(state, val){
state.nowParkId = val;
}
},
(4.2)
// 修改 state 变量的方法,可以传字符,对象等等,改对应的方法操作
this.$store.commit('updataNowParkId', parkMsg.id)
this.$store.commit(‘updataParkMsg’, 数据) ++这里的“ 数据 ”可以是个对象++,可以传入 this。
(5)Actions 修改 state 全局变量的值
- 异步操作,通过mutations来改变state;
- 不能直接改变state里的数据,通过执行 commit()来触发 mutation 的调用, 间接更新 state。
(5.1)
state: {
students:[
{id:110,name:'zhangsan',age:18},
]
},
mutations: {
updataStudents(state, val){
state.students.push(val);
}
},
actions: {
// updataInfo({ commit }, obj){
// commit('updataStudents', data)
// updataInfo(context, obj){
// context.commit('updataStudents')
updataInfo(context){
// context:上下文,这里可以理解为store对象
context.commit('updataStudents')
}
或者 异步
updataInfo(context){
// context:上下文,这里可以理解为store对象
return new Promise((resolve)=>{
setTimeOut(()=>{
context.commit('updataStudents')
resolve()
},1000)
})
}
},
(5.2)使用 this.$store.dispatch(‘xxx’) 分发 action
this.
s
t
o
r
e
.
d
i
s
p
a
t
c
h
(
′
a
c
t
i
o
n
s
方法
名
′
)
t
h
i
s
.
store.dispatch('actions方法名') this.
store.dispatch(′actions方法名′)this.store.dispatch(‘actions方法名’, 具体值)
this.$store.dispatch(‘模块名/actions方法名’, 具体值)
5.2.1
this.$store.dispath('updataInfo')
5.2.2
this.$store.dispath('updataInfo').then(res=>{
console.log('完成了更新')
})
5.2.3 传参?
this.$store.dispatch('actions方法名', '具体值')
(5.3)使用 mapActions 辅助函数
使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store)
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions([
'updataInfo', // 将 `this.updataInfo()` 映射为 `this.$store.dispatch('updataInfo')`
// `mapActions` 也支持载荷(传参):
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
// 替换方法名
...mapActions({
updata: 'updataInfo' // 将 `this.updata()` 映射为 `this.$store.dispatch('updataInfo')`
})
}
}
(5.4)分模块 与 不分模块
import { mapActions } from 'vuex'
export default {
computed: {
// 不分模块
...mapActions(['actions方法名'])
// 分模块,不改方法名
...mapActions('模块名', ['actions方法名'])
// 分模块,改方法名
...mapActions('模块名',{'新actions方法名': '旧actions方法名'})
}
}
(6)最简化的调用方式
(6.1)store/index.js
state: {
imgUrl: "https://healthytool.hsfzxyh.com/xyh_images/",
},
(6.2)
Vue.mixin({
computed: {
imgUrl: function() {
return this.$store.state.imgUrl;
},
}
})
(6.3)页面中调用 imgUrl
{{ imgUrl }}
或者
this.imgUrl