彪码vue3历险记之vuex-优快云博客

我们直接来步入主题

我们在创建vue项目的时候，会出现一个store的文件夹，没错，这就是我们的主人公,

vuex （专业术语： Vue 应用程序开发的状态管理模式）

我创建的vue3版本的项目，来让它跟大家见个面，

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

有一些小伙伴们创建的时候没有出现这个文件夹，这是因为你在创建的时候没有去勾选 VUEX ，不勾选是没有的！

有的小伙伴在单独下载的时候会出现版本的兼容问题这个时候就需要用到这个命令

vue add vue-next

这个命令会将一部分依赖升级成vue3支持的版本接下来我们就可以创建一个新的文件夹去引入我们下载的vuex

首先先说一下State 属性

在这个里面我们可以定义我们需要共享的状态值 ,

export default createStore({
  state: {
      str:'zhangzhang',
      age:'男',
  },
  mutations: {

  },
  actions: {

  },
  modules: {

  }
})

我在里面定义了两个测试数据，用来接下来展示

import { ref,toRefs} from 'vue'

toRefs是用来获取我们存储在state里的值，这个是用来将reactive对象转换为普通对象,这样我们可以使用解构赋值的方法来获取到里面我们想要的属性,我在这里把两个属性都拿出来了，下图展示

看到这里我们先不要着急获取我们的值，因为我们想获取到值还需要一个钩子来帮助我们

这个useStore是一个钩子，没错，他也需要引入

1、引入，2、我获取到的值:

import {useStore} from 'vuex'

   const store=useStore()
    const {str,age}=toRefs(store.state)

在我们的setup里将这两个值return出去，这样我们在页面里就可以使用它了,

<template>
  <div class="home">
 获取到的str:{{str}}获取到的age:{{age}} //页面打印：获取到的str:zhangzhang获取到的age:20
  </div>
</template>

这样我们简单的获取数据到这里也就结束喽

下面是肯定就是来让他们做一些事情，做事情前研究了一下怎么使用，之前使用过vue2，所以在这里理解的也快快的

<template>
  <div class="home">
 获取到的str:{{str}}获取到的age{{age}}
 <button @click="setstr">改变str</button>
  </div>
</template>

我在上图定义了一个button按钮 ,用来点击触发setstr这个方法,下图展示调用actions方法

 setup() {
    const store=useStore()
    const {str,age}=toRefs(store.state)
   const setstr=()=>{
     store.dispatch('setstr','彪码很爱你')
   }
    return {
      str,age
    }
  },

这里定义完了之后，别忘了对应的actions里面定义对应的方法，我使用store.dispatch这个方法 触发的actions 所以我们还需要在mutations里面进行定义方法去进行操作

export default createStore({
  state: {
    str: 'zhangzhang',
    age: 20,
  },
  mutations: {
    ac_setstr(state,val){
  state.str=val
    }
  },
  actions: {
    setstr({ commit }, val) {
      commit('ac_setstr', val)
    }
  },
  modules: {

  }
})

我点击了按钮，但是没触发这个方法，原因是定义了这个方法，但是没有将这个方法抛出，大家记得抛出

setup() {
    const store=useStore()
    const {str,age}=toRefs(store.state)
   const setstr=()=>{
     store.dispatch('setstr','彪码很爱你')
   }
    return {
      str,age,setstr
    }
  },

研究完了原因看一下点击前

点击后的下图

哈哈哈彪码很爱你

接下来用我们的mutations 来接收一个方法，

首先页面添加按钮，ctrl+c ctrl+v 直接复制上一个略略

<template>
  <div class="home">
 获取到的str:{{str}}获取到的age{{age}}
 <button @click="setstr">改变str</button>
 <button @click="setage">改变age</button>

  </div>
</template>

 setup() {
    const store=useStore()
    const {str,age}=toRefs(store.state)
   const setstr=()=>{
     store.dispatch('setstr','彪码很爱你')
   }
   const setage=()=>{
     store.commit('setage',30)
   }
    return {
      str,age,setstr,setage
    }
  },

没错，这次我又忘了return，偷偷加上了，我们触发mutations这个方法用到的是 commit , 这个是用来触发mutations里的方法的

export default createStore({
  state: {
    str: 'zhangzhang',
    age: 20,
  },
  mutations: {
    ac_setstr(state,val){
  state.str=val
    },
    setage(state,val){
      state.age=val
    }
  },
  actions: {
    setstr({ commit }, val) {
      commit('ac_setstr', val)
    }
  },
  modules: {

  }
})

点击了之后不出所料点击前