vue、vuex状态管理、vuex的核心概念state状态

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

vuex初步使用

1、安装vuex

口诀:“233”、“344”

数字分别对应,“vue版本,vue 路由版本、vuex 版本”。

所以这里了使用vuex3版本:

yarn add vuex@3

 vue、vuex状态管理、vuex的核心概念state状态_第1张图片

 2、创建仓库文件

vue、vuex状态管理、vuex的核心概念state状态_第2张图片

 编写如下:

// 这个文件用于存放vuex的核心代码
import Vue from 'vue'
import Vuex from 'vuex'

// 插件安装
Vue.use(Vuex)

// 创建仓库
const store = new Vuex.Store()

// 导出仓库,把仓库丢到main.js
export default store

 3、在main.js中导入

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

Vue.config.productionTip = false

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

 4、验证仓库是否被创建成功

    created () {
      console.log('222222')
      console.log(this.$store)
    },

控制台打印:

这个对象就是我们的仓库了

vue、vuex状态管理、vuex的核心概念state状态_第3张图片



使用state仓库的数据

state是vuex的核心。

状态目标:明确如何给仓库提供数据。

如何使用仓库的数据?方式有两种:

1、通过store直接访问

步骤1:提供数据State

提供唯一的公共数据源,所有共享的数据都要统一放到 Store中的 State中存储。在 state对象中可以添加我们要共享的数据。

vue、vuex状态管理、vuex的核心概念state状态_第4张图片

步骤2:获取数据:

vue、vuex状态管理、vuex的核心概念state状态_第5张图片

示例:

1、在我们的vuex仓库中添加共享的数据

// 这个文件用于存放vuex的核心代码
import Vue from 'vue'
import Vuex from 'vuex'

// 插件安装
Vue.use(Vuex)

// 创建仓库
const store = new Vuex.Store({
  // 通过提供数据,这些数据被所有的组件共享
  state: {
    title: '公共的标题',
    count: 100
  }
})

// 导出仓库,把仓库丢到main.js
export default store

2、在我们的页面中获取数据

  

{{ $store.state.title }}

2、通过辅助函数访问

简化mapstate是辅助函数,帮助我们把 store中的数据自动映射到组件的计算属性中。

vue、vuex状态管理、vuex的核心概念state状态_第6张图片

 vue、vuex状态管理、vuex的核心概念state状态_第7张图片

步骤1:

  import { mapState } from 'vuex'
  // console.log(mapState(['count','title']))
  // 我们可以在计算属性中展开mapState

步骤2:

    computed: {
      ...mapState(['count', 'title'])
    },

步骤3:

我们可以像使用vue的data中的数据一样,去使用计算属性中的变量。

   

{{ title }}

 vue、vuex状态管理、vuex的核心概念state状态_第8张图片

 3、严格模式

明确νuex同样遵循单向数据流,组件中不能直接修改仓库的数据通过 strict:true可以开启严格模式

// 创建仓库
const store = new Vuex.Store({
  // 严格模式: 如果每个组件都可以修改数据,一旦项目打了,开发人员多了,就很难维护了
  // 可以使用严格模式来让vuex修改数据,修改后,vuex在通知我们的组件,更新数据。
  // 有利于初学者,检测不规范的代码=>上线时需要关闭
  strict: true,
  // 通过提供数据,这些数据被所有的组件共享
  state: {
    title: '公共的标题',
    count: 100
  }
})

 4  mutations的操作流程

state数据的修改只能通过 mutations。

vue、vuex状态管理、vuex的核心概念state状态_第9张图片

1、仓库index.js

const store = new Vuex.Store({
  strict: true,
  state: {
    title: '公共的标题',
    count: 100
  },
  mutations: {
    // 所有 mutation函数,第一个参数,都是 state
    addCount (state) {
      state.count += 1
    }
  }
})

 2、在页面中使用我们的mutations

      handleAddCount(){
        this.$store.commit('addCount')
      }
     

 vue、vuex状态管理、vuex的核心概念state状态_第10张图片

5  mutations传参语法

vue、vuex状态管理、vuex的核心概念state状态_第11张图片

需要注意的是,如果要传递多个参数,我们需要把多个参数丢到对象当中,像传递一个参数一样,把对象传递给我们定义的mutations函数 。

6  辅助函数: mapmutations

目标:掌握辅助函数 mapmutations,映射方法mapmutations和 mapstate很像,它是把位于 mutations中的方法提取了出来,映射到组件 methods中

vue、vuex状态管理、vuex的核心概念state状态_第12张图片

mapmutations相当于3.1的辅助写法,只是把方法捞到了methods当中了。

7 actions (异步操作)

目标:明确 actions的基本语法,处理异步操作,

需求:一秒钟之后,修改 state的 count成666。

说明: mutations必须是同步的(便于监测数据变化,记录调试。
vue、vuex状态管理、vuex的核心概念state状态_第13张图片

 步骤1:修改仓库index.js

  mutations: {
    changeTitle (state, newTitle) {
      state.title = newTitle
    }
  },
  // 3.actions 处理异步
  // context上下文(此处未分模块,可以当成 store仓库)
  //  context, commit(" mutation名字,额外参数)
  actions: {
    asynChangeTitle (context, newTitle) {
      // setTimeout方法是异步的,3秒钟之后换成我们的新标题
      setTimeout(()=>{
        context.commit('changeTitle',newTitle)
      },3000)
    }
  }

这里,actions是mutations的同级对象。

步骤2: 测试

    
    methods: {
      handleChangeTitle () {
        // 调用action
        //this.$store.dispatch('我们vuex仓库中的action的名字','额外参数')
        this.$store.dispatch('asynChangeTitle','这是3秒钟之后的新标题')
      }
    },

 vue、vuex状态管理、vuex的核心概念state状态_第14张图片

总结:和前面的“mutations传参语法”目录类似,只是多了actions这个中间人 ,this.$store.commi换成了this.$store.dispatch。

8 getters

getters类似于计算属性。说明:除了 state之外,有时我们还需要从 state中派生出一些状态,这些状态是依赖 state的,此时会用到 getters。

例如: statel中定义了list,为1-6的数组,组件中,需要显示所有大于3的数据

步骤1:

getters和state同级

  getters: {
    filterList (state) {
      return state.list.filter(item => item > 3)
    }
  },

步骤2:

在组件内使用:

  import { mapState,mapGetters } from 'vuex'
    computed: {
      //mapState和mapGetters都是映射属性
      ...mapState(['count', 'title']),
      ...mapGetters(['filterList'])
    },

9 模块 module(进阶语法)

9.1 获取module的数据

项目大,代码就多了,store的文件内存上千行代码,很难维护,不易管理。

module的存在就是为了解决这个问题的。

步骤1:

在store目录下建一个新目录modules,在modules下建两个js文件,user.js,setting.js,如下:

// setting.js
const state = {
  theme: 'blue',
  desc: 'deom'
}
const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}
// user.js
const state = {
  name: 'Mike',
  hobby: '唱、跳、Rap'
}
const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

步骤2、把user.js,setting.js导入到store目录下的index.js文件中:

import settings from './modules/settings'
import user from './modules/user'

 mudules对象和state对象同级:

  modules:{
    settings,
    user
  }

步骤3 使用modules下的数据:

modules的子模块的状态,还是会挂到根级别的 state使用模块中的数据

①直接通过模块名访问$ store. state模块名.XXX

②通过 mapstate映射

默认根级别的映射 mapstate(['XXX'])子模块的映射 mapstate('模块名',['XXX']) -

需要开启命名空间

export default {
  state,
  mutations,
  actions,
  getters,
  namespaced:true
}
 ①直接通过模块名访问$store.state.模块名.XXX
     爱好: {{ $store.state.user.hobby }}

②通过mapstate映射
  (mapState)爱好: {{ user.hobby }}
    computed: {
      //mapState和mapGetters都是映射属性
      ...mapState(['count', 'title','settings','user']),
      ...mapGetters(['filterList'])
    },

vue、vuex状态管理、vuex的核心概念state状态_第15张图片

 9.2 修改module模块下的数据

步骤1、定义mutaion

const mutations = {
  setUserInfo(state,newHobby){
    state.hobby = newHobby
  }
}
    methods: {
      updateUserInfo () {
        // this.$store.commit('模块名/mutation名',参数)
        this.$store.commit('user/setUserInfo','唱、跳、Rap、Smile')
      }
    },
        
        爱好: {{ user.hobby }}

 点击按钮前:

 点击按钮后的页面:

 

你可能感兴趣的:(vue.js,javascript,前端)