1.state作用：

存储数据,State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。

2.getters作用：

state的计算属性 getters语法: 声明 new Vuex.store({ // 省略其他... getters: { // state 就是上边定义的公共数据state 计算属性名: function(state) { return 要返回的值 } } }) 使用：$store.getters.getter的名字

3.Mutations作用:

同步更新state数据, state数据的修改只能通过mutations，并且mutations必须是同步的Mutations是更新state数据的唯一方式 Mutation语法如下:

分两个格式：注册的格式，调用的格式
定义格式：如下 `new Vue.store({ // 省略其他... mutations：{ // 每一项都是一个函数，可以声明两个形参 mutation名1：function(state , 载荷 ) {

}, mutation名2：function(state , 载荷 ) {

},

} })` 每一项都是一个函数，可以声明两个形参：

第一个参数是必须的，表示当前的state。

第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据

专业术语载荷：表示额外的参数 使用格式 this.$store.commit('mutation名', 载荷 ) 第二种方法 1.在store/index.js中声明两个mutations mutations: { // 第一个参数state : 固定写法,就是vuex的state // 第二个参数载荷 : 是我们调用mutations传递的参数 setUserInfo (state, payload) { state.userInfo = payload }, setSettingInfo (state, payload) { state.settingInfo = payload } }, 2.给任意页面两个按钮分别绑定点击事件 <button @click=" changeUserInfo ">点我修改</button> <button @click=" changeSettingInfo ">点我设置</button> 3.点击事件，使用mutations methods: { // 修改个人信息 changeUserInfo () { // this.$store.commit('mutation名', 载荷 ) // 注意点：载荷只能有一个，如果需要传多个数据，需要包在对象中 this.$store.commit('setUserInfo', { name: '李四', age: 30 }) }, // 修改设置信息 changeSettingInfo () { this.$store.commit('setSettingInfo', { color: 'green', fontSinze: '20px' }) } }

4.Actions作用

异步更新state数据 actions与mutations相同点：都是修改state数据 actions与mutations不同点 mutations：同步更新 actions: 异步更新（例如你的数据来源于ajax）注意！！！！只有你的ajax数据需要存入vuex，才需要在actions中发送ajax请求。如果不想存入vuex，还是在组件的created钩子中发送。（vuex说：你又不用我，你想干啥与我何干？） actions语法如下 1.在store/index.js中声明action action在执行完异步操作之后，还是会通过mutations来更新state数据，因此使用action一定要先声明mutations mutations: { // 第一个参数state : 固定写法,就是vuex的state // 第二个参数载荷 : 是我们调用mutations传递的参数 setUserInfo (state, payload) { state.userInfo = payload }, setSettingInfo (state, payload) { state.settingInfo = payload }, setCount (state, payload) { state.count = payload } }, actions: { // 第一个参数context : 固定语法。代表当前vuex对象 // 第二个参数载荷：是我们调用action传递的参数 setAsyncCount (context, payload) { // (1)异步操作 setTimeout(() => { // (2)提交mutations更新 context.commit('setCount', payload) }, 1000) } },

5.modules作用

模块化处理vuex数据为什么要有modules? 假设你的项目非常的复杂，分为四个大模块：首页、个人中心、设置中心、购物车每一个模块有10个数据需要使用vuex，那么你的vuex的state中就需要声明40个属性。（是不是非常麻烦呢？）当vuex中需要存储的数据很多的时候，就需要使用moudles进行模块化处理一般实际开发中moudles使用不多哈。只有那种特别复杂，庞大的项目才可能用到 使用modules语法如下： export default new Vuex.Store({ // state: 用来保存所有的公共数据 state: {}, getters: {}, mutations: {}, actions: {}, modules: { 模块名1： { // namespaced为true，则在使用mutations时，就必须要加上模块名 namespaced: true, state: {}, getters: {}, mutations: {}, actions: {}, modules: {} }，模块名2： { // namespaced不写，默认为false，则在使用mutations时，不需要加模块名 state: {}, getters: {}, mutations: {}, actions: {}, modules: {} } } }) 也可以把每一个modules单独写在一个js文件中，然后导入进来 |--store / |------- index.js # 引入模块 |------- modules |-------------- / mod1.js # 模块1 |-------------- / mod2.js # 模块2

Vuex核心概念

1.state作用：

2.getters作用：

3.Mutations作用:

4.Actions作用

5.modules作用