vue中使用vuex(超详细，初学者易懂）

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选项中的方法映射成组件内的计算属性