Vuex的5个属性

一，Vuex简介

1.Vuex是什么？
Vuex是Vue.js的状态管理库，通过中心化的状态管理使得组件间的数据共享更加容易。
理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。
Vuex包含五个核心属性：state、getters、mutations、actions、modules。

1.我们什么时候应该用到Vuex呢？
a.小应用不建议使用Vuex,因为小项目使用 Vuex 可能会比较繁琐冗余；
b.中大型单页应用，因为要考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择；

二，Vuex五个核心属性
1：state
state：定义了应用程序的状态，就是我们要管理的数据。
存放应用程序的状态（数据），所有组件共享。它是Vue实例的data属性的替代品，但通过它存储和管理的状态，可以在整个应用程序中实现全局共享，即不同的组件可以通过定义的getter和setter访问同一状态数据。

const store = new Vuex.Store({
//存储和管理
  state: {
    count: 0
  }
})

getter和setter方法的作用很好理解，封装数据，对私有属性进行封装，只是暴露出public方法来访问。
封装的作用就是保护，保护属性本身不被篡改。比如有些属性只是可读但不可写，那么只提供它的getter方法就好，意思就是某些属性只能单一方向的被访问，getter和setter就是提供这样的接口，对于public的属性，可以直接使用类名来访问，自身的“安全性”就降低了。

2：getters
getters：主要用于对state进行逻辑上的组合和应用，**类似于Vue组件中的计算属性。**对state数据进行计算（会被缓存）

const store = new Vuex.Store({
  state: {
    count: 0
  },
  //类似于计算属性
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

3：mutations
mutations：用于修改state中的数据，是唯一可以修改state的地方。mutations接收state作为第一个参数，接收payload作为第二个参数。
用于修改State中的状态，只能同步执行。Mutation必须是同步函数，因为它们不能处理异步行为，异步行为应该放在Action中处理。

mutations属性中的每个方法中有两个参数，分比为state和payload；state其实就是vuex中的state属性，payload叫做mutations的载荷，其实就是传过来的值。一般payload传的是一个对象，这样可以包含多个字段并且记录的mutation 会更易读。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },
  //修改和更新state中的数据
  mutations: {
    increment(state) {
      state.count++
    },
    add(state, payload) {
      state.count += payload
    }
  }
})

4：actions
actions：用于异步操作和提交mutations，在actions中可以进行任何异步操作，最后再提交到mutations中同步修改state。actions接收context作为第一个参数，其中包含了state、getters和commit等属性。
可以包含任意异步操作（例如从服务器获取数据），可以用Mutation通过提交（commit）来修改State。

dispatch：含有异步操作；而commit只是同步操作，都是提交 mutation，因为只能在mutation中才能够改变state中的值，然而mutation中只能进行同步操作，从而actions就出现了，actions允许异步和同步操作，但是对于actions的操作其实就是提交mutation来完成；

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  //异步操作，最后再提交到mutations中同步修改state
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
})

以下是一些常用的 context 属性和方法：
context.state：用于访问和获取 Vuex 的 state 对象。
context.commit：用于触发 mutations 中的方法来修改 state。
context.dispatch：用于触发其他 actions 中的方法。
context.getters：用于访问 Vuex 的 getters。
context.rootState：用于访问根级别的 state。
context.rootGetters：用于访问根级别的getters。
context.rootCommit：用于触发根级别的 mutations。
context.rootDispatch：用于触发根级别的 actions。
这些属性和方法可以通过 context对象来访问，根据需要进行使用。请注意，context 对象是一个包含了上述属性和方法的对象，并不是 Vuex 的实例本身。

5：modules
modules：模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter，以便提高应用程序的可维护性。
将State、Getter、Mutation、Action模块化，便于组件化和模块化开发。

const store = new Vuex.Store({
//用于将store分割成模块，以便提高应用程序的可维护性
  modules: {
    cart: {
      **state**: {
        items: []
      },
      **getters**: {
    	doubleCount(state) {
      	return state.count * 2
    }
  },
      **mutations**: {
        addItem(state, item) {
          state.items.push(item)
        }
      },
      **actions**: {
        addAsyncItem(context, item) {
          setTimeout(() => {
            context.commit('addItem', item)
          }, 1000)
        }
      }
    }
  }
})

三，Vuex使用方法
第一步：npm i vuex --save/-S
第二步： 创建store.js
第三步：挂载使用 Vue.use(vuex)
第四步：const store = new Vuex.Store({…配置项})
第五步：导出 export default store
第六步：导入main.js 在根据实例配置 store 选项指向 store 实例对象
具体如下

1.安装

npm install vuex

2.创建store.js

// 初始化一个vuex的实例（数据仓库） 导出即可
import Vuex from 'vuex'
import Vue from 'vue'
 
// 使用安装
Vue.use(Vuex)
 
// 初始化(创建 Store 的实例对象)
const store = new Vuex.Store({
  // 配置（state|mutations|actions）
})
 //向外共享 Store 的实例对象
export default store

3.把store对象挂载到Vue实例中

import store from '@/store'
new Vue({
  // 把store对象挂载到vue实例对象中，这样就可以在所有的组件中获取store中的数据了
  store,
  render: h => h(App),
}).$mount('#app')

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。