vue3中如何使用vuex

最近想出一版如何在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})
        }

打印如下