vuex的使用

归途风景111

已于 2022-01-27 21:43:22 修改

阅读量458

点赞数 2

分类专栏： vue 面试文章标签： html javascript sass

于 2022-01-06 19:27:38 首次发布

本文链接：https://blog.csdn.net/weixin_58032613/article/details/122350417

版权

面试同时被 2 个专栏收录

59 篇文章 8 订阅

订阅专栏

vue

54 篇文章 4 订阅

订阅专栏

5.1什么时候会用到模块化管理vuex数据呢？

6.vuex的辅助函数

vuex有哪几个辅助函数呢？

vuex的辅助函数一共有四个(4大金刚)：

1.什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件。它采用集中式存储管理应用的所有组件的状态，而更改状态的唯一方法是提交mutation，例this.$store.commit('SET_VIDEO_PAUSE', video_pause，SET_VIDEO_PAUSE为mutations属性中定义的方法

2.vuex有五大核心要素，分别是：

state属性：存放状态，例如你要存放的数据
getters：类似于共享属性，可以通过this.$store.getters来获取存放在state里面的数据
mutations：唯一能改变state的状态就是通过提交mutations来改变，this.$store.commit()
actions: 异步的mutations，可以通过dispatch来分发从而改变state
modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

3.怎么引用vuex

首先使用vue脚手架创建项目使用vue create demo ('demo'可以是任意的一个名字，可以是a，也可以是b)
cd到项目里面，在项目里面下载依赖cnpm install vuex --save
在项目文件夹里面找到store文件夹下面的index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//不是在生产环境debug为true
const debug = process.env.NODE_ENV !== 'production';
//创建Vuex实例对象
const store = new Vuex.Store({
    strict:debug,//在不是生产环境下都开启严格模式
    state:{
    },
    getters:{
    },
    mutations:{
    },
    actions:{
    }
})
export default store;

在main.js文件中引入vuex

import Vue from 'vue';
import App from './App.vue';
import store from './store';
const vm = new Vue({
    store:store,
    render: h => h(App)
}).$mount('#app')

在home.vue中使用

<template>
  <div>
    {{$store.state.token}}
  </div>
</template>
<script>

export default={
 name: 'Home',
  data() {
    return {
      tel: '',
          }
  },
  created(){
    //调用acionts中的方法
    this.$store.dispatch('set_token',12345);
    //调用mutations中的方法
    this.$store.commit('to_token',123456)
  }


}

<script>

Vuex中状态储存在哪里，怎么改变它？
存储在state中，改变Vuex中的状态的唯一途径就是显式地提交 (commit) mutation。

4. 数据持久化

存储在vuex中的状态，刷新页面，会丢失。为了解决刷新页面数据丢失，才有了数据持久化。

利用插件vuex-persistedState做到数据持久化

安装插件
cnpm install vuex-persistedState -S

-S 是--save的简写，意为：把插件安装到dependencies（生产环境依赖）中
-D是--save-dev的简写，意为：把插件安装到devDependencies（开发环境依赖）中

使用

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  plugins: [createPersistedState({
    storage: sessionStorage,
    key: "token"
  })]//会自动保存创建的状态。刷新还在
})

storage:存储方式。（sessionStorage,localStarage） key:定义本地存储中的key

5.模块化管理

5.1什么时候会用到模块化管理vuex数据呢？

项目庞大，数据信息量特别大的时候，我们可以考虑分模块形式管理数据，比如user模块管理用户信息数据，cart模块管理购物车数据，shop模块管理商品信息数据。

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

const state= ()=>{ token:''}
const actions = {
   set_token({commit},val){
     commit("to_token",val)
  }
}
const mutations = {
   to_token(state,val){
    state.token=val;
  }
}
const getters = {}


//user模块
let user = {
  namespaced: true, //一定要开始命名空间。
  state: { userid: 1234 },
  actions: {
  },
  mutations: {
    SET_USERID(state, val) {
      state.userid = val;
    }
  },
  getters: {

  }
}

//购物车数据的模块
let cart = {
  namespaced: true,
  state: { userid: 567 },
  actions: {

  },
  mutations: {
  },
  getters: {

  }
}


const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    user,
    cart
  },
  plugins: [createPersistedState({
    storage: sessionStorage,
    key: "token"
  })]//会自动保存创建的状态。刷新还在
})

export default store

home.vue如何使用

获取user模块的`userid`
this.$store.state.user.userid

this.$store.commit("user/SET_USERID",12345)
// 前面是指定模块user 中的SET_USERID 方法，后面是传参 可以是对象、数组、字符串等

6.vuex的辅助函数

vuex有哪几个辅助函数呢？

vuex的辅助函数一共有四个(4大金刚)：

mapState,mapActions,mapMutations,mapGetters

辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的

在home.vue中使用

<template>
 <div id="">
   {{ token }}
   {{ token - x }}
 </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

import {createNamespacedHelpers} from 'vuex'

const {mapState:mapStateUser,mapActions:mapActionUser,mapMutations:mapMutaionuser} = createNamespacedHelpers('user')

const {mapState:mapStateCart,mapActions:mapActionCart,mapMutations:mapMutaionCart} = createNamespacedHelpers('cart')



export default {
 name: '',
 data() {
   return {}
 },
 computed: {
   ...mapState({
     token: 'token'
   }),
   ...mapGetters(['token-x']),
   ...mapSateUser(['userid']),
   ...mapStateCart({cartid:'userid'})
 },
 //生命周期 - 创建完成（访问当前this实例）
 created() {
   this.setToken('123456')
 },
 //生命周期 - 挂载完成（访问DOM元素）
 mounted() {},
 methods: {
   ...mapActions({
     setToken: 'setToken'
   }),
   ...mapMutations(['SET_TOKEN']),
   ...mapMutaionUser({
   setId:"setToken"
  })
 }
}
</script>