vuex

vuex的使用场景：

1. 保存登录状态 token 用户名

   登录成功，添加商品：/addProduct?id=1&name=香蕉&token

2. 购物车

今后，只要遇到多个组件有共享的状态时，就把这个状态放到vuex存储

Vuex使用

安装

npm i vuex --save

创建文件

src下新建一个store文件夹，新建一个index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    
})

Main.js

import store from './store'
new Vue({
	router,
	store
})

四大核心概念

state

存储公用数据

new Vuex.Store({
	state: {
		count: 0
	}
})

// 组件内
computed: {
	count() {
		return this.$store.state.count
	}
}

辅助函数 mapState

import { mapState } from 'vuex'

computed: {
	...mapState(["count", "name"])
}

mutations

存储同步方法，专门用来修改state里面的数据

mutations: {
	changeCount(state, payload) {
		// 注意，没有第三个参数
		state.count++
	}
}


this.$store.commit("changeCount", 2)

actions

存储异步方法，一般用来掉接口获取数据

actions: {
	getData(context) {
		setTimeout(() => {
			context.commit("getData", "123")
		}, 1000)
	}
}，
mutations: {
	getData(state, payload) {
		state.count = payload
	}
}

```javascript
 import { mapState } from 'vuex'
    export default {
        computed: {
            ...mapState(["cartList"])
        }
    }