1.vuex的好处
集中管理共享数据
高效实现组件之间的数据共享
vuex的数据都是响应式的,能够实施保持数据与页面的实施更新和同步
2.vuex和localStorage的区别
-
vuex是存储在内存中,localStroage存储数据在浏览器本地存储的
-
vuex的数据是瞬时的,localStroage是持久的,是不容易丢失的
-
vuex的数据是响应式的,localStorage中的数据不是响应式的
-
vuex直接操作JS的对象无需转换,localStorage存储数据要转成JSON,取数据要将JSON转成JS对
-
vuex还能完成异步操作(网络请求的),localStorage仅仅只是一个保存数据和获取数据
-
vuex中数据按照业务进行模块化,localStorage管理数据没有模块化
-
单页面应用的程序组件数据共享使用使用状态机(vuex),localStorage适合多页面数据的共享
Vuex的仓库配置:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{},
getters:{},
mutatinos:{},
actions:{},
modules:{}
})
export default store
在vue的入口文件把store仓库挂载上去
Vuex的五大属性:
state是仓库中的状态数据
mutaions是里面放的是同步的方法,用来修改state里面的数据
actions是里面放的是异步的方法,里面可以进行异步的操作,用来修改state里面的数据,但是它本质上还是需要调用mutations方法修改的state的数据
getters选项中专门是依赖于state数据,产生新的数据,就相当于组件中计算属性
modules主要是进行模块化管理的
Vuex的语法:
state:
在组件中访问state数据this.$store.state.数据名,如果在标签中直接使用该数据不用加this。
muations:
在mutaions中定义方法 : 方法名(state,payolad){} ,参数一代表state里面的数据,参数二表达的是外部传入的数据,数据来源于组件或者actions里面
如果在组件中需要调用mutations方法的话用到this.$store.commit(’‘方法名”,传递的参数)用来调用同步的方法
同时记住它是不支持异步操作的
actions:
在actions中定义方法:方法名(context,payload){},参数一代表的是context上下文作用域,通过context.commit方法可以调用mutaions里面的方法来修改state数据
如果在组件中需要调用actions方法的话需要用到this.$store.dispatch(’方法名‘,传递的参数),它是异步操作的
getters:
在getters中定义getter 方法名(state){
return 返回的数据
}
在组件中调用的语法:this.$store.getters.getter方法名称 ,在组件中访问: this.$store.getters.totalPrice
Vuex的辅助函数:
vuex中提供了以下四种常用方法
-
mapState():这个方法就是将状态机仓库中的state数据映射成组件内数据
-
mapMutatations():将状态机仓库中mutations选项中方法映射组件的方法
-
mapActions():将状态机仓库中actions选项中的方法映射成组件的方法
-
mapGetters():将状态机仓库中getters选项中的方法映射成组件内的计算属性