vue3进阶-如何使用vuex

一、首先明白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>

小结：

1. 组件中dispatch派发actions中的同名事件
2. 异步：通过actinos的方法提交commit, 触发mutation事件；
   同步：可以直接提交commit触发mutation
3. 在mutation中修改state中的数据, 一个地方改变 其他地方也会改变