vuex（ 笔记二 ）

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.getNowParkIdthis.$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.store.dispatch(′actions方法名′)this.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