最近想出一版如何在vue3中使用vuex
首先，在这里回答一个粉丝的问题，为什么有local storage 和session storage还要使用vuex，这里我解释一下，我们要明白浏览器的存储和vuex的存储的不同点，首先，浏览器存在本地，vuex存在内存里，所以vuex刷新会丢失，从现在来看，好像存在浏览器里会更好，但是，有个问题时，存在浏览器里不是响应式的啊，只有存在vuex才是响应式啊，我们通过计算属性或者watch监听下在同步更新下就行，但是，浏览器不支持响应式，所以，我们为了规避掉vuex的的刷新丢失的问题，所以，当刷新时，从浏览器的存储里拿数据，防止在vuex里面，在传给组件，借助vuex的特性，实现浏览器本地存储的内容响应式组件，这里可能又有人杠了，说，有方法能够不通过vuex实现浏览器存储响应式，但是，你没发现，这不就和vuex的状态管理一样吗，原装的不用，用一个不健全的状态管理，早晚得出问题！！
言归正传
1，下载vuex
npm i vuex@next --save
2，创建vuex对象
2.1 在src文件夹下新建一个文件夹store，在文件夹下面新建index.ts文件
编辑
2.2 在index.ts文件里创建vuex对象
import { createStore } from 'vuex' export default createStore({ state: { name:123 }, getters: { }, mutations: { }, actions: { }, modules: { } })
2.3 在入口文件main.ts那里将store对象添加到vue实例里去
编辑
3.vuex介绍
3.1 store
数据的存储位置，所有的数据都会存储在这里。
3.2 getters
类似于计算属性，当state的数据有变化时，执行这里的代码，首次执行
3.3 mutations
修改store里的数据的代码需要在这里面进行填写，但是在这里不能异步修改store的数据。
3.4 actions
异步修改store的数据，异步执行完成后，调用mutations的修改函数，对store的数据进行修改。
4. store
定义
import { createStore } from 'vuex' export default createStore({ state: { name:123 }, getters: { }, mutations: { }, actions: { }, modules: { } })
在组件中使用
这里一定要注意下，要记得配合技术属性computed来使用，这样就能同步更新了
<template> <div> {{ name }} </div> </template> <script lang="ts"> import { useStore } from 'vuex' //导入usestore方法来获取store数据 import { onMounted } from 'vue'; import axios from "axios" export default { setup() { const store = useStore() //将方法赋值给store const name = computed(()=>store.state.arr) //通过state.name来获取name的数据 return { name } } } </script>
5.getters
import { createStore } from 'vuex' export default createStore({ state: { name:123 }, getters: { counte(state){ //定义好后在页面上直接使用即可，只能接受一个参数，这个参数就是来自于state return state.name+1 } }, mutations: { }, actions: { }, modules: { } })
在页面上配合computed计算属性使用
const message = computed(()=>store.getters.counte)
5.1 getters如何接收组件传入的参数
寻常方法肯定是不能接收组件传入的参数，得使用特殊的方法，需要在vuex里这样定义
getters: { counte(state){ return (sum:any)=>{ //返回一个函数，函数接收一个形参，然后在组件中调用时传入实参即可获取到，如果通过获取到的参数和store里的数据进行计算后在return即可 return state.name+sum } } },
在组件中
const message = computed(()=>store.getters.counte(999))
counte(999)，其中999就是我们传递的参数
6.mutations
6.1 修改基础类型数据
我们想要修改store里的数据，只能通过mutations进行修改，修改store只有这一个渠道
在vuex中
mutations: { updata(store){ store.name=777 } },
在组件中调用修改函数进行修改，只需要把updata函数绑定一个点击时间即可，其中commit接收一个对象，对象里type的属性值就是我们在mutations里定义好的修改store内容的函数名称
const updata=()=>{ store.commit({type:"updata"}) }
6.2 修改引用数据类型（数组）
由于我们在mutations接收的store的数据如果是引用类型的数据的话，我们接收的数据只是该数据的地址，所以，如果要修改数组的话，只能是将store的数据全部替换
先解构，然后在重新赋值，这样就能实现修改store里数组的数据了
arrupdata(store){ let arr1=[...store.ar] arr1[2]=999 store.arr=arr1 }
在组件中使用
const updata = () => { store.commit("arrupdata") }
6.3 修改引用类型数据（对象）
这里用的思路和修改数组的思路一致，但是要借助一点的是，就是使用对象的属性，先将对象解构，然后重新填入对象里要修改的属性，对象有个特性，就是属性相同时，后传入的覆盖之前传入的，这也就能修改对象数据。
state: { obj:{name:"张三"} }, mutations:{ objupname(state){ state.obj={...state.obj,name:"李四"} //重新传入一个name,属性值是我们要新修改的内容 } },
7，异步修改数据
异步修改state里的数据大体的逻辑是，在异步修改时，调用mutations进行修改state的数据。代码如下
const store = createStore({ state: { obj:{name:"张三"} }, mutations:{ objupname(state){ state.obj={...state.obj,name:"李四"} //重新传入一个name,属性值是我们要新修改的内容 } }, actions:{ fn(commtext){ //接收一个参数，这个参数是mutations里定义的方法 setTimeout(()=>{ //写于异步代码 commtext.commit({type:"objupname"}) //调用mutations里的修改方法进行修改state里的数据 },3000) } } });
在组件中使用
import { useStore } from 'vuex'; export default ({ setup() { const store = useStore() const updata =()=>{ store.dispatch({type:"fn"}) }
同时，直接接收组件中的参数
actions:{ fn(commtext,payload){ //接收2个参数，第一个参数是vuex里的修改函数，第二个参数是组件中传入进来的数据 console.log(payload,99) setTimeout(()=>{ commtext.commit({type:"objupname"}) },3000) } }
在组件中传入，属性名称随便定义，属性值就是我们要传递给actions里的数据
const updata =()=>{ store.dispatch({type:"fn",a:1111}) }
打印如下
