Vue3开发 vuex的使用

Vuex是一个公共状态管理的Vue开发插件，如我们想要在多个组件中使用其他组件的的某个状态（数据），如果是子父级之间的传值非常简单，但是如果一旦它们之间的层级关系变的更加复杂，那么我们想要取得其他组件的状态就非常麻烦了。Vuex呢就可以将我们需要共享的状态抽离出来，保存在一个store中，在各个组件中的就可以直接在store中取相关的状态，Vuex也可以称为是一个状态管理库。

首先我们在Vue Cli的项目中安装vuex，在终端输入以下命令，–save表示将vuex加在生产环境依赖中。

npm install vuex --save

安装好Vuex插件之后，下面讲讲Vuex的使用。在我们的项目根目录的src目录下添加一个store的文件夹，创建一个index.js文件。以下是Vue3中Vuex的配置方式。

import {createStore} from 'vuex'

const moduleA = {
    state:{
        name:'张三'//取值方式为$store.state.a.name
    },
    actions:{
        aUpdateName(context){//这个context是当前模块的上下文
            setTimeout(()=>{
                context.commit('updateName')
            },1000)
        }
    },
    mutations:{
        updateName(){//提交方式还是$store.commit('updateName')，不能与其他地方的方法同名。
        }
    },
    getters:{
        fullName(state){//使用方式还是this.$store.getters.fullName
            console.log(state);
        },
        fullName2(state,getters,rootState){//state是当前模块的状态，getters是当前模块的getters方法，rootState是根模块的状态
            console.log((state + getters + rootState));
        }
    }
}
export default createStore({
    state:{//store中的根状态
        counter:1000,
        info:{
            name:'kobe',
            age:42,
            height:1.98
        }
    },
    actions:{//用于处理异步方法，调用mutations的方法
        aupdateInfo(context,payload){
            console.log(payload);
            setTimeout(()=>{
                context.commit('updateInfo')
            },1000)
        }
    },
    mutations:{//mutations中的方法必须是一个同步方法
        increment(state){//state即是store.state对象
            state.counter++
        },
        decrement(state){
            state.counter--;
        },
        incrementCount(state,num){//这里的第二个参数就是用户传过来的参数，称为载荷(Payload)。可以是一个变量，也可以是一个对象，用于传递多个参数。
            state.counter += num;
        },
        updateInfo(state){
            state.info.name = 'wsl';
            // Vue.set(state.info,'address','洛杉矶')
            // this.set(state.info,'address','洛杉矶')
            // state.info.set()
        }
    },
    getters:{//作用与计算属性相同，用于返回经过某种处理后的数据
        powerCounter(state){
            return state.counter * state.counter;
        },
        powerCounter2(state,getters){//注意第二个参数值指的就是getters，与命名无关。
            return getters.powerCounter +1;
        },
        customCounterNum(state){
            return  num => state.counter = num;//返回一个函数
            // return function (num) {
            //     return state.counter = num;
            // }
        }
    },
    modules:{//用于模块化的管理state数据，这个模型中的数据最终还是会加入到上面的根的state中。
        a:moduleA
    }
})

完成以上Vuex的配置之后，就需要在我们的main.js主入口文件中添加该配置了。

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

具体的用法看下面App.vue文件吧，以上的配置文件中均有注释，就不在详述了。

<template>
<!--  <input type="text" v-model="counterInit"><button @click="initCountNum">自定义值</button>-->
  <h2>计数器值：{{$store.state.counter}}</h2>
<!--  <button @click="addition">+</button>-->
<!--  <button @click="subtraction">-</button>-->
<!--  <hello-vuex></hello-vuex>-->
<!--  <h2>Getter相关内容</h2>-->
<!--  <p>{{this.$store.getters.powerCounter}}</p>-->
<!--  <p>{{this.$store.getters.powerCounter2}}</p>-->
  <button @click="addCount(5)">+5</button>
  <button @click="addCount(-5)">-5</button>
  <h2>Info信息：{{$store.state.info}}</h2>
  <button @click="this.$store.dispatch('aupdateInfo','我是payload')">修改</button>
  <h2>Modules中的内容：{{$store.state.a.name}}</h2>
</template>

<script>
// import HelloVuex from "./components/HelloVuex";
export default {
  name: 'App',
  data(){
    return{
      message:'hello vuex',
      counterInit:1000
    }
  },
  components:{
    // HelloVuex
  },
  methods:{
    addition(){
      this.$store.commit('increment');//调用$store中mutation的increment方法
    },
    subtraction(){
      this.$store.commit('decrement');//调用$store中mutation的increment方法
    },
    initCountNum(){
      this.$store.getters.customCounterNum(this.counterInit);
    },
    addCount(num){
      this.$store.commit('incrementCount',num);
      // this.$store.commit({//第二种提交风格
      //   type:'incrementCount',
      //   num
      // });
    }
  },
  computed:{

  }
}
</script>
<style>
</style>