vuex

最新推荐文章于 2024-06-03 08:11:16 发布

tz_lws

最新推荐文章于 2024-06-03 08:11:16 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/qq_40131290/article/details/102846249

版权

Vuex是什么

Vuex称为Vue的状态管理工具，也是多组件状态共享的工具
状态：状态就是数据

Vuex的作用

它是一个存储状态的仓库，类似：本地存储、cookie、database
多个组件共享一个状态，我们称之为： ‘多组件状态共享’
它还可以管理状态，这种形式我们称之为‘ 状态管理’

Vuex组成部分

Vuex的核心组成部分
- state 数据的存储者，它的作用是定义数据【状态】
- actions 动作的创建者，它的作用是创建动作，然后发送动作
- mutations 动作的出发者，它的作用是用来修改数据 -更新视图
后端数据交互写在actions中
vuex调试工具主要调试的mutations
vuex是流程化执行的，符合单向数据流思维

Vuex流程

流程1 component – dispatch --> actions – commit --> mutations – mutate --> state --> component
流程2 component – commit --> mutations – mutate --> state --> component
流程3 component – commit --> mutations – mutate --> state --> getter --> component
流程4 component --dispatch --> actions – commit --> mutations – mutate --> state --> getter --> component

Vuex基础操作流程【数据不分块】

安装vuex $ yarn add vuex

在src/store/index.js

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use( Vuex )

// 1. 定义store 模块 
const store = new Vuex.Store({
  state：{
    count: 0 
  },
  actions：
    /* 
      1. actions是一个对象
      2. acitons里面放的都是方法
      3. 方法的作用是创建动作，发送动作
    */

    increment ( { commit }, val ) {
      // 动作创建
      const action = {
        type: INCREMENT,
        val
      }
      // 发送动作
      commit( action )
    }
  },
  mutations：{
    /* 
      * 也是一个对象
      * 里面存放的也是方法
      * 方法名称是actions发送来的动作的类型
      * 接收两个参数
      *   state就是数据 ， action就是actions发来的动作
      * mutations作用是用来修改数据的
      * payload表示从组件传递过来的参数   负载
    */
     INCREMENT ( state,action ) {
      //修改数据
      state.count ++
    }
  },
  getters: {}, //getters表示帮助 视图【 组件 】  获得store中的 state 
  modules // 用来实现数据分块的
})

// 2. 导出store模块
export default store

在main.js中注入

import store from './store'
new Vue({
  router, // 在项目中注入路由，让所有的子组件都用于路由属性 $route  $router
  store, // 在项目中注入store,让所有的子组件拥有一个属性  $store ， 用于和vuex进行通信
  render: h => h(App),
}).$mount('#app')

在组件中使用

<template>
  <div>
    <button @click = "add"> + </button>
    <p>  </p>
  </div>
</template>

<script>
export default {
  methods: {
    add () {
      // this.$store.dispatch( actions中方法的名称 )
      this.$store.dispatch('increment',100)
    }
  }
}
</script>

Vuex基础操作流程【数据分块】

安装vuex $ yarn add vuex

在src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import home from '../views/home/store'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules:{
        home //导入模块
    }
})

export default store

在main.js注入

import store from './store'
new Vue({
  router, // 在项目中注入路由，让所有的子组件都用于路由属性 $route  $router
  store, // 在项目中注入store,让所有的子组件拥有一个属性  $store ， 用于和vuex进行通信
  render: h => h(App),
}).$mount('#app')

在src/views/home/store.js中打造vuex

import axios from 'axios'
const GETMOVIES = 'GETMOVIES'

export default{
    state:{
        movies:null,
    },
    actions:{
        getMovies({commit}){
            axios({
                url:'/ajax/movieOnInfoList',
                params:{
                    token: ''
                }
            }).then(res=>{
                commit({
                    type:GETMOVIES,
                    payload:res.data
                })
            })
        },
    },
    mutations:{
        GETMOVIES(state,action){
            state.movies = action.payload
        }
    }
}