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.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.$store.dispatch{(}^{\prime }actions方法{名}^{\prime })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