浅谈 vuex

本文已参与 「新人创作礼」活动, 一起开启掘金创作之路。

Vuex 的使用

1. 安装依赖 yarn add vue@3.6.2; npm i 也可以 vue2 配套 vuex@3.6.2 版本
2. src 文件夹下新建 store 文件新建 index.js 文件

import Vue from 'vue'
// 导入依赖包
import Vuex from 'vuex'

// 把 Vue 安装为 vue 的插件
Vue.use(Vuex)

// 创建 store 的实例对象
const store = new Vuex.Store({
  // 存储数据
  state: {
      username:'小顾',
      age:14
  },
  mutations: {
      add(state) {
          state.age++
      },
      arrAll(state, loading) {
          state.username = loading
      }
  }
})

// 向外共享 store 的实例对象
export default store

3. 在 main.js 导入 index 文件

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import store from './store/index.js'

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

Vuex 的 state

1. vuex 中全局定义数据是在 state 里: 存放全局数据

// 创建 store 的实例对象
const store = new Vuex.Store({
    // 存储数据
    state: {
        username:'小顾',
        age:14
    }
})

2. 使用方法: this.$store.state.数据名如下:

<template>
    <div>
        <h2>login 组件</h2>
        <!-- html 里面的使用方法 -->
        <h3>{{$store.state.username}}</h3>
         <button @click="bar">点我更改小顾</button>
    </div>
</template>

export default {
    mounted() {
      // script 的使用方法
        console.log(this.$store.state.username);
    }
}

Vuex 的 mutations

1. mutations 就是定义方法 示例:

const store = new Vuex.Store({
    // 存储数据
    state: {
        username:'小顾',
        age:14
    },
    mutations: {
        arrAll(state, loading) {
          // (就是 state 的全部数据, 组件当中传过来的载荷, 也就是数据)
            state.username = loading
        }
    }
})

2. 组件配合使用:

export default {
    methods: {
        bar() {
            // 这里书写需要添加 this ('mutations 的方法','传过去的载荷')
            this.$store.commit('arrAll','小白')
        }
    }
};

Vuex actions 的使用

1. actions 就是用来处理异步的 ajax 一般发送请求就是在这里面发送 示例:

// 定义
const store = new Vuex.Store({
  // 发送 Ajax
  actions: {
      async axiosList(context) {
          console.log(context); // 就相当于是 this.$store 里面包含很多
          let res =await axios.get('http://www.liulongbin.top:3009/api/getbooks')
          // 调用 mutations 的 initList 方法, 把请求回来的数据存放在 state 里面
          context.commit('initList',res.data.data)
      }
  }
})

    methods: {
      // 触发点击事件
      axiosData() {
          // 使用方式
            this.$store.dispatch('axiosList')
        }
    },

Vuex getters 的使用

1. getters 就相当于是计算属性 示例:

const store = new Vuex.Store({
    // 存储数据
    state: {
        kookList: [],
        username:'小顾',
        age:14
    }, 
    getters: {
        listPrice(state) {
            return state.kookList.reduce((acc,sum)=>{
                return acc + sum.price
            }, 0)
        }
    }
})

<template>
    <div>
        <h2>index 组件</h2>
        <button @click="addList">index 按钮 +1</button>
        <!-- 调用方法 -->
        <h3>钱数: {{$store.getters.listPrice}}</h3>
    </div>
</template>

Vuex modules

1. 就是用来拆分模板，把复杂的场景按模块来拆开 对于大的项目有更好的支持 使用: src --> store --> modules --> 自己定义的模块.js
2. 自己定义的模块.js export default 默认导出

import axios from 'axios'
export default {
    namespaced: true,
    // 存储数据
    state:() => ({
        num: 1,
        list:[
            {id:1, name:'小顾', age:18},
            {id:2, name:'小刘', age:20}
        ],
        item: []
    }),
    // 处理事件
    mutations: {
    },
    // 解决异步, 发送请求
    actions: {
        async axiosBook(context) {
            let res = await axios.get('http://www.liulongbin.top:3009/api/getbooks')
            console.log(res);
            context.state.item = res.data.data
        }
    },
    // 计算属性
    getters: {
        sum(state) {
            return state.num + 10
        }
    }
}

3. 在 manin.js 导入

const store = new Vuex.Store({
    modules: {
        bookName
    }
})

4. 调用: getters:    this.$store.getters["模块1/g名字"] state:    this.$store.state.模块1.数据名字 mutations:    this.$store.commit("模块1/m名字, 参数） actions:    this.$store.dispatch('模块1/a名字", 参数）