一、首先明白vuex是什么，简单来说：
1、vuex用来创建一个全局唯一的仓库store，来管理全局通用数据。
2、一处修改，全局改变
二、store中的几个基本概念
1、state： 定义全局数据, 例如用户信息
2、getters： 相当于计算属性
3、mutations： 用来同步修改state中的数据，只允许写同步代码，不推荐写异步代码
4、actions: 异步的修改数据，主要是通过commit触发mutation
5、modules: 用来管理各个子模块
三、传统方式使用vuex
举个例子，在state中定义一个用户姓名name， 我们要做的是在页面中使用和修改name.以此为目的我们展开来说：
首先store中定义好name：
// store/index.js
export default createStore({
state: {
name: 'mily'
}
})
在页面中我们可以直接通过$store.state.name获取, 也可以通过计算属性computed，比如
// home.vue
<template>
<div class="home">
<h1 @click="handleClick">点击修改名字：{{myName}}</h1>
</div>
</template>
<script>
export default {
name: 'HomeView',
computed: {
myName() {
return this.$store.state.name
}
}
}
</script>
如果我们需要对name作出修改，可以通过dispatch或者commit，这里有两种情况:
1、 如果需要异步修改，需要通过store的dispatch派发一个action来修改;
2、 如果同步修改，可以直接commit一个mutation方法。
打个比方，这里我们使用异步修改的方式：
1-1、首先我们在页面定一个methods, 定义handleClick方法来修改,
// home.vue
methods: {
handleClick() {
// 同步修改： this.$store.commit('CHANGE', 'song')
// 异步改变：通过store的dispatch发一个store中定义的action
this.$store.dispatch('changeName', 'song')
}
}
1-2、其次，我们也需要在store的action中定一个changeName的方法, 然后通过commit触发一个mutation; 第一个参数为store, 第二个参数为传递过来的参数
// store/index.js
changeName(store, params) {
// 通过commit触发mutation
setTimeout(() => {
store.commit('CHANGE', params)
}, 1000);
}
1-3、最后，我们在mutations中定义一个CHANGE方法, 第一个参数为state，第二个为传递过来的参数；
// store/index.js
mutations: {
CHANGE(state, str) {
state.name = str;
}
}
四、compositon-api中如何使用vuex
<template>
<div class="about">
<h1>
This is an about page
<p @click="handleClick">{{name}}</p>
</h1>
</div>
</template>
<script>
import { useStore } from 'vuex'; // 1、引入useStore
import { toRefs } from 'vue';
export default {
setup() {
const store = useStore(); // 2、创建store对象
const { name } = toRefs(store.state); // 解构，也可以不解构
function handleClick() {
store.dispatch('changeName', 'hello mily') // 3、事件派发
}
return {
name,
handleClick
}
}
}
</script>
小结：
- 组件中dispatch派发actions中的同名事件
- 异步：通过actinos的方法提交commit, 触发mutation事件；
同步：可以直接提交commit触发mutation - 在mutation中修改state中的数据, 一个地方改变 其他地方也会改变
