vuex的使用，vuex实操（vuex的相关属性，vuex的五大核心属性）

古城微笑少年丶 2023-10-03 22:57 27阅读 0赞

#### ⭐vuex简介: 是vue的状态管理工具（也可理解为一个仓库），用于存储公共数据，任何组件都可以使用vuex里的公共数据； ####

#### ⭐vuex使用场景：如果需要构建是一个中大型单页应用，会考虑如何更好地在组件外部管理状态，就使用vuex；一般创建项目时都会勾选上vuex，或者通过npm或yarn安装，如下： ####

//npm
    npm install vuex@next --save
    
    //yarn
    yarn add vuex@next --save

#### ※ 下面给大家介绍一下vuex的相关属性和使用方式※ ####

#### 一、vuex的五大核心属性和持久化插件，如下： ####

//store>index.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    //vuex的5个重要属性
    export default new Vuex.Store({
      //1、state存放状态和数据
      state: {},
      //2、mutations修改状态和数据
      mutations: {},
      //3、getters计算属性
      getters: {},
      //4、actions异步操作
      actions: {},
      //5、modules模块化
      modules: {},
    
      //还有一个属性，用于vuex数据持久化； 需要npm安装，引入，使用
      // npm i vuex-persist --save
      // import vuexPersist from "vuex-persist";
    
      //和state和mutations同级
      plugins: [
        new vuexPersist({
          storage: window.localStorage,
        }).plugin,
      ],
    })

#### 二、vuex属性 实操； ####

#### **1、state 存放状态和数据** ####

//store > index.js
    state{
       data:{ name:"xxx",age:18 }
       sums：123，
    }
    
    
    //vue页面
    //使用方式1
    <div>{
       {$store.state.data.name}}</div>
    //使用方式2
    <div>{
       {this.$store.state.sums}}</div>

####  ####

#### 2、mutations 修改状态和数据 ####

//store > index.js
    mutations: {
        add(state,num){//这里的num就是通过commit传值过来的数字10
          state.sums += state.sums + num;
        }
      },
    
    
    //vue页面使用
    methods:{
      choseAdd(){
        //点击触发vuex里mutations中定义的方法，通过函数方法修改state数据，并传值
        this.$store.commit("add",10)
      }
    }

####  ####

#### 3、gertters 计算属性 ####

//store > index.js
    state{
       count:10,
    }
    //getters 求count的平方
    gerters:{
          choseCount(state){
            return state.count * state.count
          },
    }
    
    
    //vue页面
    //使用方式1
    <div>{
       {$store.getters.choseCount}}</div>
    //使用方式2
    computed: {
         power() {
          return this.$store.getters.choseCount;
        },
      }
    <div>{
       { power }}</div>

####  ####

#### 4、actions 异步函数操作 ####

//store > index.js
    //首先下载并引入axios
    npm i axios
    import axios from 'axios'
    //然后再使用
    actions: {
        async defineGetData (context, num) {//这里的num是传过来的数据123
            const res = await axios.get('https://******')
            // 触发通过调用mutation > commit 修改list的值
            context.commit('updateList', res.data.list)// context类似于this.$store
        }
    },
    
    mutations: {
        updateList (state, data) {//这里的data就是res.data.list
          state.list = data
        }
    }
    
    
    //vue页面
    //激活调用
    methods: {
        choseBtn() {
            // 使用dispatch调用actions方法，并传值
            this.$store.dispatch('defineGetData', 123)
        }
    }

#### 5、modules 模块化文件 ####

//store > index.js
    import demo1 from './module/demo1'
    import demo2 from './module/demo2'
    
    modules: { // 子vuex状态模块注册
            namespaced: true, // 为了解决不同模块命名冲突的问题
            demo1,
            demo2 
        }

感觉有用，就一键三连，感谢(●'◡'●)