个人关于vuex中的理解与使用

最新推荐文章于 2023-04-30 19:39:48 发布

UzumakiHan

最新推荐文章于 2023-04-30 19:39:48 发布

阅读量176

点赞数

分类专栏： Vue 文章标签： vuex中的理解与使用

本文链接：https://blog.csdn.net/Hhjian524/article/details/111577003

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

官方给出的解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
具体详情可浏览官网https://vuex.vuejs.org/zh/

以下主要是介绍个人平时对vuex的使用

1.安装vuex

cnpm i vuex --save

然后在src目录下创建store文件夹，然后创建index.js
初始化如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    
  },
  getters:{
  
  },
  mutations: {
   
  },
  actions: {
  },
  modules: {
  }
})

在main.js中引入store

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

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app')

Vuex 的核心是 Store（仓库），相当于是一个容器，一个 Store 实例中包含以下属性的方法：
state 定义属性（状态、数据）
getters 用来获取属性
actions 定义方法（动作）
commit 提交变化，修改数据的唯一方式就是显示的提交 mutations
mutations 定义变化，处理状态（数据）的改变

现在就编写实例来达到两个不同的页面共享store state中的数据吧。
首先在state中定义一个数据

state: {
    //热门文章
    hotArticle: []
  },

然后访问node后台获取数据库中的热门文章的接口数据，这个一般在actions 中异步进行。

actions: {
    //获取热门文章
    async getHotArticleList({ commit }, limitcount) {
      let result = await getHotArticle(limitcount);
      commit('getHotArticleList', result.data)
    }
  },

然后同步提交到mutations 中改变state中的hotArticle的数据

 mutations: {
    getHotArticleList(state, data) {

      state.hotArticle = data;
      console.log(state.hotArticle)
    },
  },

具体的store/index.js代码如下

import Vue from 'vue'
import Vuex from 'vuex'
import { getHotArticle } from '../api/index'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //热门文章
    hotArticle: []
  },
  mutations: {
    getHotArticleList(state, data) {

      state.hotArticle = data;
      console.log(state.hotArticle)
    },
  },
  actions: {
    //获取热门文章
    async getHotArticleList({ commit }, limitcount) {
      let result = await getHotArticle(limitcount);
      commit('getHotArticleList', result.data)
    }
  },
  modules: {
  }
})

接口的封装可以浏览之前的文章https://blog.csdn.net/Hhjian524/article/details/110173113

首先在home页面中使用store state中的数据，对hotArticle进行遍历

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <router-link :to="{ name: 'About'}">跳转到about</router-link>
    <ul>
      <li v-for="(item,index) in $store.state.hotArticle" :key="index">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
    };
  },
  mounted() {
  //调用store 中actions getHotArticleList的方法
    this.$store.dispatch("getHotArticleList", 10);
  },
  components: {}
};
</script>

在这里插入图片描述
然后点击跳转到About页面，同时也获取store中state的数据

<template>
  <div class="about">
    <h1>About</h1>
    <ul>
     <li v-for="(item,index) in $store.state.hotArticle" :key="index">
       {{item.title}}
     </li>
   </ul>
  </div>
</template>

<script>
export default {
  name: "About",
  components: {},
  data() {
    return {
     
    };
  },
  mounted(){
    this.$store.dispatch("getHotArticleList", 10);
  }
};
</script>