vuex总结

vuex总结

1 什么是vuex？

1.1：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，相当于是一个仓库，存放公共数据的，任何组件都可以使用存放在仓库里面的数据

2.由五部分组成和在页面中的使用方法

2.1：state：定义数据，使用方法是通过：this.$store.state.xxx(方法名)

2.2：actions：可以包含异步操作，使用方法是通过：
this.$store.dispatch.xxx(方法名)

2.3：mutations：唯一可以修改state数据的场所，使用方法是通过：this.$store.commit.xxx(方法名)

2.4：getters：类似于vue组件中的计算属性，对state数据进行计算（会被缓存），使用方法是：this.$store.getters.xxx(方法名)

2.5：modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

3.如何使用这些属性呢？

下载vuex

npm install vuex --save

3.1：然后在根目录下面创建一个store这个文件夹，它下面创建index.js文件，这个里面主要是操作vuex相关的一些内容

3.2：再打开index.js这个文件，在里面做vuex的一些操作，第一

//需要通过import把vue和vuex引入进来
import vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex);
//通过Vue.use(vuex)把vuex引入到全局

//下面把这五个属性，分别创建出来，最后把store抛出
const state= ()=>{ token:''}

const actions = {
  set_token({commit},val){
    commit("to_token",val)
 }
}
const mutations = {
  to_token(state,val){
   state.token=val;
 }
}
const getters = {}
let store = new Vuex.store({
 state,
 actions,
 mutations,
 getters
})
//
module.export=store;

4.举一个最简单的使用案例。

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

export default={
 name: 'Home',
  data() {
    return {
      tel: '',
          }
  },
  created(){
    //调用actions中的方法
    this.$store.dispatch('set_token',12345);
    //调用mutations中的方法
    this.$store.commit('to_token',123456);
    //调用state中的方法
    this.$store.state.xxx（定义在state中的数据名）
    //调用getters中的方法
    this.$store.getters.xxx(定义在getters中的方法名)
  }
}
<script>

4.1：Modules，模块化管理store（仓库）
4.2：如何使用模块化

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

5.vuex的数据持久化

1：为什么要使用数据持久化呢

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

2：vuex的数据持久化需要利用vuex-persistedstate插件搭配本地存储localStorage或sessionStorage一起使用

3：首先我们要先安装持久化工具插件

npm install vuex-persistedstate --save

1
3：接下来在store下的index文件中引入，默认存储到localStorage中

import createPersistedState from "vuex-persistedstate"
 
conststore =newVuex.Store({
 
  // ...
 	state,
    getters,
    actions,
    mutations,
  plugins: [createPersistedState()]
 
}）

4：如果想要存储到sessionStorage，配置如下,跟五大属性同级

import createPersistedState from "vuex-persistedstate"
 
conststore = newVuex.Store({
 
    plugins: [createPersistedState({
 
        storage:window.sessionStorage
 
    })]
 
})

最后放一个图，可以帮助我们更好的理解vuex实现单向数据流的示意图。