vuex核心知识总结

vuex: 状态管理模式集中式存储管理应用的所有组件的状态。用于多组件通信

优点:数据存储方便、数据流动清晰、数据是响应式、代码结构化且易维护。

1、传输流程

dispatch触发actions方法—commit触发mutations—在mutation里面进行state修改—页面变化
vuex核心知识总结_第1张图片

2、安装与配置

  1. 安装:npm install [email protected]
  2. 实例化store         根目录/src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  modules:{}
  getters:{}
  state: {},
  mutations: {},
  actions: {}
})
  • 注册vue实例        main.js
import store from './store'
new Vue({
  // 省略其他...
  store 
})
  • 使用:this.$store.state

3、核心属性

  • state:定义统一数据,与data类似
  • mutations:更改vuex中状态的唯一方法,通过commit触发,同步任务,与methods类似
  • actions:包含异步任务,提交到mutation执行
  • modules:模块拆分
  • getters:类似computed,只有依赖值发生变化才会重新计算
state: 定义数据
// 定义、声明变量
state: {
   name:"张三",
   age:12,
 },
// 调用
// 方式一:标签使用
<p>{{$store.state.name}</p>
// 方式二:方法调用
this.$store.state.name
// 方式三:辅助函数mapState
import { mapState } from "vuex" // 按需引入
computed: {
   ...mapState(['name','age'])
 }
 <p>{{name+age}}</p>
mutations:修改数据,更改store状态唯一方法
// 定义、声明变量
state: {
   count:0
 },
 mutations:{
 //每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)
 //这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
   add(state,num){
   	state.count+=num
   },
   reduce(state){
    state.count--
   }
}
// 调用
// 方式一:commit触发
methods:{
   btn(){
   	this.$store.commit("add",1)
   }
}
// 方式二:辅助函数mapMutations
import { mapMutations} from "vuex" // 按需引入
methods: {
   ...mapMutations(['add','reduce']),
   btn(){
   	this.add(1)
   }
 }
actions:异步操作,提交给mutation执行
// 定义、声明变量
state: {
   count:0
 },
 actions:{
 // 方式一:context
	reduceAsync(context){
		setTimeout(()=>{
			context.commit("reduce")
		},1000)
	},
// 方式二:直接commit
	addAsync({commit},num){
		setTimeout(()=>{
			commit("add",num)
		},1000)
	}
 }
// 调用
// 方式一:dispatch触发
this.$store.dispatch("reduceAsync")
// 方式二:辅助函数mapActions
import { mapActions} from "vuex" // 按需引入
methods: {
   ...mapActions(['reduceAsync']),
   btn(){
   	this.reduceAsync()
   }
 }
getters:计算属性,对store中数据进行处理加工
state: {
   age:10
 },
getters:{
   getAge(state){ // 只有state一个参数
   	return  state+='岁'
   }
}
// 使用:
// 方式一:标签使用
<p>{{$store.getters.getAge}</p>
// 方式二:放入computed
computed:{
   age(){
   return this.$store.getters.getAge
   }
}
 <p>{{age}}</p>
// 方式三:辅助函数mapGetters
import { mapGetters} from "vuex" // 按需引入
computed: {
   ...mapGetters(['getAge'])
 }
 <p>{{getAge}}</p>
modules:拆分模块,每个模块有独立的state、mutations、actions、getters、modules(嵌套子模块)
modules:{
   ageModules:{
   		state:{ age:10},
   		mutations:{
   			changeAge(state){
   				state.age=20
   			}
   		}
   },
   nameModules:{
   		state:{name:'张三'}
   		// 省略的mutations、actions、getters、modules
   }
}
// 使用
this.$store.state.nameModules.name

补充说明:模块创建后,可动态注册、动态卸载模块

// 动态注册模块---使用同上
store.registerModule('moduleName',{
//........
})
// 动态注销模块----对于静态模块无效,
store.unregisterModule(moduleName)

4、actions与mutations的区别

  • mutations修改state的唯一途径,actions不能直接修改state
  • mutations 同步操作,actions 异步任务
  • actions触发后,会提交给mutations来修改state状态
  • mutations 参数是state;actions的参数是context,包含state和getters

补充说明:mutation为何不能是异步?
每个mutation执行完会得到一个状态变更,devtools会打快照存起来,可以实现time-travel,可以跟踪一个状态的变化,若为异步,则无法进行状态追踪

5、vuex 与localStorage区别

  • vuex 存内存; localStorage存浏览器
  • vuex能做数据的响应式,localStorage不能
  • vuex一般用于组件间传值,localStorage用于跨页面传参
  • vuex刷新会丢失,localStorage不会

补充说明:vuex刷新后数据丢失怎么处理?----用sessionStorage、localStorage存储

6、vuex 与redux的区别

vuex 弱化了dispatch,弱化reducer基于commit直接对数据修改
共同思想:单一数据源、变化可监测

7、vuex严格模式、namespaced作用

严格模式:状态变更不是mutation操作的,会抛出错误(便于状态变更被调试工具追踪到)
开启严格模式:

export default new Vuex.Store({
 strict:true
})

namespaced:模块管理时防止不同模块命名冲突、可设置namespaced:true

// 模块A
//....省略代码
export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}
// 调用:
// store.state.模块名.属性
this.$store.state.moduleA.name
// 模块名/模块中mutation
this.$store.commit("moduleA/add",10)
// 模块名/模块中action
this.$store.dispatch("moduleA/addAsync",10)
// 模块名/模块中getter
this.$store.getters.moduleA.getAge

8、vuex辅助函数(重复使用state、getters、mutations、actions)

mapState、mapGetters、mapMutations、mapActions
详见3的示例

你可能感兴趣的:(#,Vue,javascript,vue.js,前端)