什么是 vuex
vuex是vue的全局状态的管理工具，vuex数据更新,其引用组件都会响应式的更新
vuex 代码一般放在项目的 src/store/index.js
使用 vuex的好处
1、数据的存取一步到位，不需要层层传递
2、数据的流动非常清晰
3、存储在Vuex中的数据都是响应式的
那么我们先来思考一个问题：什么样的数据适合存储到Vuex中？
答案是：需要共享的数据，例如购物车的数据，用户界面数据等
Vuex的作用就是：频繁、大范围的数据共享
vue官方提供的独立于组件体系之外的，管理公共数据的工具
一张图了解 vuex
简单来说：action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据， 应用层级的状态应该集中到单个 store 对象中。提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。异步逻辑都应该封装到 action 里面。
vuex模块
vuex分为五个大块
- state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
- mutations ： 使用它来修改数据(类似于methods)
- getters： 类似于 computed 计算属性，对现有的状态进行计算得到新的数据
- actions：发起异步请求
- modules：存储模块数据
在 store/index.js 配置相关代码，具体如下：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state(){
// 就是公共的数据，所有的组件都可以直接使用
count: 100
}
// getter 从现有数据计算新的数据
getters: {
},
// mutations 是改变数据state的唯一方式
// 建议大写
mutations: {
},
// 发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部
actions: {
},
// 用来引入模块数据
modules: {
}
})
export default store
五大模块数据格式
state
state:{
cartNum:10
}
mutations
// 每一项都是一个函数，可以声明两个形参
// mutation名1：function(state [, 载荷]) {},
// mutation名2：function(state [, 载荷]) {}
SET_CARTNUM(state, data) {
state.CartNum = data
}
getters
// state 就是上边定义的公共数据state
// getter的名字1: function(state) {
// return 要返回的值
// }
fee: function(state) {
return state.price * 0.5
}
actions
setCart(context, data) {
// 1. 发异步请求, 请求数据
// 2. commit调用mutation来修改数据
setTimeout(() => {
context.commit('SET_CARTNUM', data)
}, 4000)
}
modules
user
// 这里模块调用的时候前面需要引入
// import user from './modules/user'
外部调用 vuex 的方法
// !!!!!! 调用的时候需要导入方法
// 导入 vuex 映射关系
import {
mapState,
mapGetters,
mapActions,
mapMutations
} from 'vuex'
- 外部调用 state 方法
直接使用： this.$store.state.xxx;
map辅助函数：
computed: {
…mapState([‘xxx’]),
…mapState({‘新名字’: ‘xxx’})
}
- 外部调用 mutations 方法
直接使用：this.$store.commit(‘mutation名’, 参数)
map辅助函数：
methods: {
…mapMutations([‘mutation名’]),
…mapMutations({‘新名字’: ‘mutation名’})
}
- 外部调用 getters 方法
直接使用：$store.getters.getter的名字 来访问
map辅助函数：
computed: {
…mapGetters([‘xxx’]),
…mapGetters({‘新名字’: ‘xxx’})
}
- 外部调用 actions 方法
直接使用：在组件中通过this.$store.dispatch(‘actions的名字’, 参数)来调用action
map辅助函数：
methods: { …mapActions([‘actions名’]), …mapActions({‘新名字’: ‘actions名’}) }
- 访问模块中的的数据
获取数据项： { {$store.state.模块名.数据项名}}
获取getters： { {$store.getters[‘模块名/getters名’]}}
$store.commit(‘mutations名’) // namespaced为false
$store.commit(‘模块名/mutations名’) // namespaced为true
组件中访问 mutatioins,actions 中的方法,不需要添加模块名