vuex的基本介绍和使用

1. vuex作用:

1.1 是一个专为 vue.js 应用程序开发的状态管理模式,集中式存储管理应用的所有组件的状态,以此实现非父子甚至不同组件之间的高效通信
1.2 缓存后端数据,提高用户体验

2. 什么时候vuex比较适用?

如果构建一个中大型单页应用,考虑到如何更好地在组件外部管理状态,vuex 就成为了自然而然的选择。但是如果您的应用够简单,不打算开发大型单页应用的话,最好还是不要使用 vuex,因为这时候使用 vuex 可能是繁琐冗余的。

3. vuex原理:

图片来自官网

vuex的状态管理分为同步状态和异步状态,都是在单向数据流理念下通过vue 的官方调试工具 devtools extension进行状态管理,所以最好严格遵循数据流向:
同步状态:Mutation====>State
异步状态:Actions====>Mutation====>State

4、vuex的几种常见安装及使用步骤:
4.1 安装vuex:

npm:
npm i vuex --save
yarn:
yarn add vuex
cdn直接引入:
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

4.2检查项目下的main.js是否引入了store:

项目生成时就有的,但是最好检查一下:

import store from './store' //默认指向store/index.js

4.3 开始编译项目下src/store/index.js:

store中默认状态下的index.js

5、vuex的五大核心用法:

(1) state:单一状态树 ,每个应用将仅仅包含一个 store 实例,存放需要公共管理的状态(变量名)
(2) getters:可以从store 中的 state 中派生出一些状态,getters的返回值会根据 它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,类似于vue的计算属性
(3) actions:异步状态管理下的开始,存方法
(4) mutations:同步状态下的开始以及异步状态下的中转,存方法。更改 vuex 的 store 中的状态的唯一方法是提交 mutation。
(5) modules :管理模块,当多人合作开发时,避免每个人在同一个index.js文件修改,可把index.js中的state、mutations、getters、actions分为几个模块,在自己的模块文件中编译,最后将所有的模块名引入在Module中。(分为几个子模块后状态共享的用法也会不同,下面会详细介绍)
注意:只是分为几个模块,但是一个项目中store里始终只能有唯一的index.js
以下是本人开发过程中的index.js,其中注释部分有详细介绍数据流中传参相关语法:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from '@/util/http'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        isTabbarShow: true,
        cinemaList: [],
        cityName: "北京",
        cityId: "110100"
    },
    // 处理同步状态+异步状态下的中转
    mutations: {
        show(state) {
            state.isTabbarShow = true
        },
        hide(state) {
            state.isTabbarShow = false
        },
        //第一个参数默认为state,第二个参数是Action传过来的参数
        setCinemaList(state, data) {
            //把数据传到state
            state.cinemaList = data;
        },
        setCityName(state, data) {
            state.cityName = data
        },
        setCityId(state, data) {
            state.cityId = data
        }
    },
    // 处理异步请求
    actions: {
        //store是形参名,vuex会自动传实参:store实例对象,第二个参数为组件中共享状态时传的参数
        getCinemaAction(store, id) {
            axios.request({
                url: `/gateway?cityId=${id}&ticketFlag=1&k=9719361`,
                headers: {
                    'X-Host': 'mall.film-ticket.cinema.list'
                }
            }).then(res => {
                console.log(res.data)
                 //提交中转到mutations
                store.commit("setCinemaList", res.data.data.cinemas)
            })
        },
    },
    //对上面全局状态进行数据处理,类似于vue的计算属性
    getters: {
        defaultList(state) {
            return state.cinemaList.slice(0, 5)
        }
    },
    modules: {}
})
6、在任意组件中实现状态共享的常见的一些语法用法(与上面相对应):

共享state/getters中的状态:this.$store.state/getters+在state中的状态名

this.$store.state.cinemaList
this.$store.getters.defaultList

共享actions中的状态: this.$store.dispatch(‘xxx’,需要传的参数)

this.$store.dispatch("getCinemaAction",this.cityId)

共享mutations中的状态: this.$store.commit(‘xxx’,需要传的参数)

this.$store.commit("hide")//调用mutations中的hide()
7、辅助函数mapState、mapActions、mapMutation、mapGetters用法:

上面组件中共享状态用法是不是觉得很麻烦????这四个辅助函数很高兴为您做简化服务>>>>>>>>
7.1 在组件中引入辅助函数:

import { mapState,mapGetters} from 'vuex'//需要哪个里面的状态就引入哪个

7.2 用展开运算符引入所需的状态名并开始简化使用,简化用法:不管是state、mutations还是其他两个里面的,直接this.状态名

computed: {
        ...mapState(["cinemaList"]),
        ...mapGetters(["defaultList"]),
        SdefaultList(){
            return this.defaultList
        }
    },
methods: {
        ...mapMutations(["show","hide","setCinemaList"]),
        handleCity(){
            this.setCinemaList([]);
            this.hide()
        }
    },

不知道智慧的大噶有没有发现展开的位置有要求呢????
好吧,我等不及了,现在揭晓:














注意!!!!!!!!!!!!!!!!!!!!!!!
一定要记得:根据他们中存的是状态(变量)还是方法
mapState、mapGetters一般在计算属性中展开
mapActions、mapMutation在methods中展开

8、index.js模块化:

当多人合作开发时,避免每个人在同一个index.js文件修改,可把index.js中的state、mutations、getters、actions分为几个模块,在自己的模块文件中编译,最后将所有的模块名引入在Module中。一般按组件分:
8.1 在store下建立modules文件夹,添加所需的js文件(所需的模块)
8.2 在对应的模块下编译需要共享的状态:

import http from '@/util/http'

const module = {
    namespaced: true, //开通命名空间
    state: {
    },
    actions: {
    },
    mutations: {
    },
    getters: {
    }
    
export default module

8.3 在index.js文件的modules下引入所有模块:

import Vue from 'vue'
import Vuex from 'vuex'
//引入模块
import cinema from './module/cinemaModule'
import tabbar from './module/tabbarshowModule'
import city from './module/cityModule'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
  },
  mutations:{
  },
  actions:{
  },
  getters:{
  },

  modules:{
  //添加模块名
    cinema,
    tabbar,
    city
  }
})
export default store

8.4 在组件中使用:
需要哪个模块的状态就前面加上模块名

computed: {
		//只有这里有改变
        ...mapState("cinema",["cinemaList"]),
    	...mapState("city",["cityName","cityId"]),
    	
        SdefaultList(){
            return this.defaultList
        }
    },
methods: {
        ...mapMutations(["show","hide","setCinemaList"]),
        handleCity(){
            this.setCinemaList([]);
            this.hide()
        }
    },
9、Vuex缓存数据永久化:

vuex每次从后台获取的缓存数据虽然能够减少数据加载次数,但是每次刷新就清空了,但我们实际开发中是需要它永久保存的,所以
9.1 安装

//nmp
npm install --save vuex-persistedstate
//yarn
yarn add vuex-persistedstate
//cdn引入
<script src="https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js"></script>

欲知更详细点我就知道

9.2 index.js中添加import和plugins

//引入vuex-persistedstate
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
//添加
  plugins: [createPersistedState({
    reducer(data){
      return {
        city:data.city//需要永久化的模块,默认为全部永久化
      }
    }
  })],
  state: {
  },
  mutations:{

  },
  actions:{
  },
  getters:{
  },
  modules:{
    cinema,
    tabbar,
    city
  }
})
export default store

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值