vuex入门解读

什么是VueX

官方文档给的答案是：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
VueX文档

VueX的工作流

在组件中通过dispatch触发action，action通过拷贝提交到mutations，mutation则可以改变state的值，当state的值发生改变，那么页面上的值也会发生变化

VueX的属性和基本使用

创建

import Vuex from 'vuex'
import Vue from  'vue'
Vue.use(Vuex)
let  store = new Vuex.Store({
   state:{  },
   getters:{  },
   mutations:{  },
   actions:{  }
})
export default store

注册

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
Vue.config.productionTip = false
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

state：存储要读取和更改的数据

import Vuex from 'vuex'
import Vue from  'vue'
Vue.use(Vuex)
let  store = new Vuex.Store({
   state:{
   		'name':'ning',
   		'age':18,
   		'price':100,
   		'payNum':1
   }
})
export default store

组件中获取state的值

// 配置在计算属性中
computed: {
	name () {
		return this.$store.state.name
	}
}
// 直接使用
this.$store.state.name
// 展开运算符配合辅助函数mapState读取
import { mapState } from 'vuex'
computed: {
	// ...mapState(['name','age'])
	// 换属性名
    ...mapState({
    	// 将this.$store.state.name改为loginName输出
    	loginName:state=>state.name,
    	age:state=>state.age
    })
}

getters：对已存储的数据进行加工输出

import Vuex from 'vuex'
import Vue from  'vue'
Vue.use(Vuex)
let  store = new Vuex.Store({
   state:{
   		'name':'ning',
   		'age':18,
   		'price':100,
   		'payNum':1
   },
   getters:{
   	 // 可以用第二个参数来使用在getters中定义的值
     totalPrice(state,getters){
       console.log(getters.decimalTotalPrice(2)) // 100.00
       return state.price * state.payNum
     },
     // 也可以写函数
     decimalTotalPrice: (state) => {num} => {
       return (state.price * state.payNum).toFixed(num) // 保留小数
     },
   }
})
export default store

组件中获取值

// 配置在计算属性中
computed: {
	totalPrice () {
		return this.$store.getters.totalPrice
	}
}
// 直接使用
this.$store.getters.totalPrice
// 函数要调用
this.$store.getters.decimalTotalPrice(2)
// 展开运算符配合辅助函数mapGetters读取
import { mapGetters} from 'vuex'
computed: {
	// ...mapGetters(['totalPrice'])
	// 更换属性名
    ....mapGetters({
  		// 把 `this.money` 映射为 `this.$store.getters.totalPrice`
  		money: 'totalPrice'
	})
}

mutations：编写对存储数据更改的函数

mutations里面写函数 修改全局状态值 this.$store.commit(‘自定义函数名’,{传递的参数})

import Vuex from 'vuex'
import Vue from  'vue'
Vue.use(Vuex)
let  store = new Vuex.Store({
   state:{
   		'name':'ning',
   		'age':18,
   		'price':100,
   		'payNum':1
   },
   mutations:{
   		changeName(state,params){
       		state.name = params.name || params
     	}
   }
})
export default store

mutations里面的函数接受的两个参数 第一个为state第二个为传递的参数(可以是对象的形式)
规定只有mutation才能修改state 通过commit方法触发

methods: {
    change(){
      // 通过commit方法触发mutation 
      // 载荷方式
      // 参数1 要触发的方法名
      // 参数2 是要传递的数据
      this.$store.commit('changeName','hong')
      // 对象方式
      this.$store.commit({
  			type: 'changeName',
  			name: 10
		})
    }
}
// 通过辅助函数
import { mapMutations} from 'vuex'
methods:{
	...mapMutations(['changeName'])  // this.chageName({})
	...mapMutations({
		'changeNameMutation':'changeName'// this.changeNameMutation({}) 等于 this.$store.commit('changeName',{})
	})
}

actions： 可以使用异步的方法去触发mutations中的函数

actions
可以放异步操作 触发mutation 通过dispatch 触发 再通过commit触发mutation修改全局状态值

import Vuex from 'vuex'
import Vue from  'vue'
Vue.use(Vuex)
let  store = new Vuex.Store({
   state:{
   		'name':'ning',
   		'age':18,
   		'price':100,
   		'payNum':1
   },
   mutations:{
   		changeName(state,params){
       		state.name = params.name || params
     	}
   },
   actions:{
    	changeNameAction({commit},params){
	      	// 网络请求
	      	setTimeout(()=>{
	        	commit('changeName',params)
	      	},1000)
    	}
  	}
})
export default store

组件内事件：this.$store.dispatch(‘test’,{age:777})

methods: {
    change(){
      // 通过dispatch方法触发action
      // 载荷方式
      // 参数1 要触发的方法名
      // 参数2 是要传递的数据
      this.$store.dispatch('changeNameAction',{name:'hong'})
      // 对象方式
      this.$store.dispatch({
  			type: 'changeNameAction',
  			name: 10
		})
    }
}
// 通过辅助函数
import { mapActions} from 'vuex'
methods:{
	...mapActions(['changeNameAction']) // this.changeNameAction({})
	// 换名字
	...mapActions({
      changeNameHong: 'changeNameAction'  // this.changeNameHong({}) 等于 this.$store.dispatch('changeNameAction',{})
    })
}

小计

最简版
1. 组件里通过 $store.state 获取全局状态数据进行渲染
2. 通过 $store.commit 方法触发mutation 修改全局状态值 整个页面都会变
稍微复杂版
1. 组件里通过 $store.state 获取全局状态数据进行渲染
2. 通过 $store.dispath方法 触发action里的方法
3. action 触发mutation进行修改全局状态值
辅助函数
帮助我们减少代码量
值类型向计算属性映射
mapState 将全局状态管理的state值映射到使用组价的计算属性
写在computed内
computed:{…mapState([‘name’,‘age’])}
mapGetters 将全局状态管理的getters值映射到使用组价的计算属性
写在computed内
computed:{…mapGetters([‘方法名1’,‘方法名2’])}
函数类型向methods进行映射
mapMutations 将mutation的值映射到 方法里

    
methods：{
	...mapActions(['changeNameAction']),
    // 完整写法
	change(){this.$store.dispatch('changeNameAction',{name:'伽椰子'})}
    // 辅助函数调用action 
    change(){this.changeNameAction({name:'伽椰子'})}
}
// mapActions  将actions里的值映射到方法
methods：{
	...mapMutations(['changeName']),
	// 辅助函数mutation的调用方式
	change(){this.changeName({name:'伽椰子'})}
}

Module模块化

1. 模块化之后state的取值需要添加一级模块名 其他的三个核心不变
2. 可以在模块里添加命名空间 作用就是在 mutation getters actions的名字前面 添加模块名 （$store.自定义模块名.getters…）
   用处就是防止名字冲突

modules:{
  //  模块1
   test1:{
     namespaced:true, //开启命名空间
     state:{ ...},
     mutations:{ ...},
     getters:{ ...},
     actions:{ ...}
   },
  //  模块2
   test2:{
     state:{ ...},
     mutations:{ ...},
     actions:{ ...},
     getters:{ ...}
   }
 }

模块化后的使用
…mapState({自定义:(state)=>{ return state.模块名.name }})