vuex——纯用法，无理论

最新推荐文章于 2023-11-11 20:27:46 发布

原创最新推荐文章于 2023-11-11 20:27:46 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vuex

vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Vuex状态管理模式在Vue.js应用程序中的使用方法。包括安装配置、基本用法（如本地数据传输和异步请求数据处理）、核心概念（如state、mutations、actions）以及如何在实际项目中有效利用Vuex进行状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

个人理解：组件间传参使用，不用考虑父子组件关系或者非父子组件关系

vuex官网：https://vuex.vuejs.org/zh/ 点击打开链接

安装：cnpm install vuex --save

注册vuex

新建存放vuex的文件store/index.js

引用并声明vuex

  import 
  Vue 
  from 
  'vue'
 

  import 
  Vuex 
  from 
  "vuex"
 

  Vue.
  use(
  Vuex);
 

用法一：纯本地数据传输（非异步请求数据）

定义vuex内容

  const 
  store = 
  new 
  Vuex.
  Store({ 
  //定义
 
  state: {
 
  title: 
  " ", 
  //提前定义数据名称
 
  comingsoon: 
  "",
 
   },
 
  mutations: {
 
  //方法名称和传参时定义的名称一致
 
  kerwinchangetitle(
  state, 
  payload) { 
  //第一个参数是要存放的位置，第二个参数是传来的数据
 
   state.
   title = 
   payload
  
    }
  
   },
 
  })
 
  export 
  default 
  store; 
  //导出

引用store

  import 
  Vuex 
  from 
  "vuex"
 

  import 
  store 
  from 
  "./store"
 

  new 
  Vue({
 
  el: 
  '#app',
 
  router,
 
   store,
 
  axios,
 
  components: { 
  App },
 
  template: 
  '<App/>',
 
  render
  : 
  h 
  => 
  h(
  App)
 
  })

传送数据

点击事件跳转组件，跳转之前将数据传送到vuex内储存

  setStore(
  name) {
 
 
  this.
  $store.
  commit(
  "kerwinchangetitle", 
  name);
 
 
  router.
  push(
  "/");
 

   }
 

kerwinchagetitle：定义传送方法名称

name：将要储存在vuex内的数据

接收数据

  mounted() {
 
 
  this.
  title = 
  this.
  $store.
  state ? 
  this.
  $store.
  state.
  title : [];
 

   }
 

this.$store.state.title：vuex内存放的数据名称，将vuex内的数据请求出并赋值给该组件的this.title

用法二：异步请求数据

 import axios from "axios"; //引入axios

       state: {
 
  comingsoon: 
  ""
 
   },
 
  actions: {
 
  comingsoonaction
  : 
  function (
  store, 
  payload) {
 
  //异步请求
 
  axios.
  get(
  "").
  then(
  res 
  => {
 
  console.
  log(
  res.
  data.
  data) 
  //请求回来的数据
 
  store.
  commit(
  'kerwincomingsoon', 
  res.
  data); 
  //传给metations中修改
 
   })
 
   }
 
   },
 
  metations: {
 
  kerwincomingsoon
  : 
  function (
  state, 
  payload) {
 
  state.
  comingsoon = 
  payload 
  //修改参数 赋值给comingsoon。
 
   }
 
   }