前端【VUE】17-状态管理【Vuex】【使用介绍】【分模块】【持久化到localStorage【插件vuex-persist】】

1、组件下载

　　vue 与vuex的版本对应关系：
　　　　 Vue 2 匹配的 Vuex 3
　　　　 Vue 3 匹配的 Vuex 4
　　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
　　官方网站：https://vuex.vuejs.org/zh/

// npm
npm install vuex@next --save

// yarn 
yarn add vuex@next --save

2、项目中定义及配置

　　在src目录下新增store目录，创建index.js文件，内容如下

// 1. 导入所需的包
import Vue from 'vue'
import Vuex from 'vuex'
// 2. 将Vuex注册为Vue的插件
Vue.use(Vuex)
// 3. 创建 store 实例对象
const store = new Vuex.Store({
  // 配置vuex
  strict: true, // 开启严格模式,防止小白在组件中使用的时候直接修改state数据
  // state 用于存储数据(存储状态) (vuex状态管理)
  state: {
    sex: 23,
    uname: 'badWoman',
    list: [
      { id: 1, name: '吃饭', isDone: true },
      { id: 2, name: '睡觉', isDone: false },
      { id: 3, name: '听歌', isDone: true }
    ]
  },
  // mutations 是 vuex 中"唯一"可以修改 state 数据的方法, 不支持异步更新,只能放同步代码
  mutations: {
    abc (state, n) {
      state.sex = n
    }
  },
  // actions 里面放异步方法
  actions: {
    newSex (store, n) {
      setTimeout(() => {
        store.commit('abc', n) // 只要是修改state中内容, 都通过mutations中的方法进行操作
      }, 3000)
    }
  },
  // getters 是vuex中的计算属性(和组件中的计算属性意义一样,但是不支持set修改)
  // 为了方便获取state中的数据;插件作者会给每个计算属性方法,传递一个 state 参数
  getters: {
    ccc (state) {
      return state.sex * state.sex
    },
    all (state) {
      return state.list.every(item => item.isDone === true)
    }
  }
})
// 4. 导出 store 对象
export default store

　　main.js

import Vue from 'vue'
import App from './App.vue'
// 导入定义的store目录下的index.js文件
// import store from '@/store/index.js' // 如果导入某个目录下的index文件, 则可以省略index
import store from '@/store'
Vue.config.productionTip = false

new Vue({
  store, // 将导入的store添加到vue实例
  render: h => h(App)
}).$mount('#app')

　　组件AnyOne.vue

<template>
  <div>
    <h2>随便一个组件-1</h2>
    <!-- 使用vuex中状态, state中的uname -->
    <p>{{ $store.state.uname }}</p>
    <!-- 使用vuex中状态, state中的sex -->
    <p>{{ $store.state.sex }}</p>
    <!-- 使用vuex中配置的计算属性 -->
    <p>{{ $store.getters.ccc }}</p>
    <p>{{ $store.getters.all }}</p>

    <!-- 调用mutations中定义的修改state的方法abc, 并传递参数5000 -->
    <button @click="$store.commit('abc', 5000)">更新sex</button>
    <br />
    <!-- 调用actions中定义的异步方法newSex，并传递参数20 -->
    <button @click="$store.dispatch('newSex', 20)">3s后更新sex</button>
  </div>
</template>

<script>
export default {}
</script>
<style lang="less" scoped></style>

　　组件AnyTwo.vue

<template>
  <div>
    <h2>随便一个组件-2</h2>
    <!-- 使用计算属性 -->
    <!-- <P>{{ sex }}</P> -->
    <p>{{ uname }}</p>
    <P>{{ nianLing }}</P>
    <P>{{ uname }}</P>
    <P>{{ ccc }}</P>
    <P>{{ all }}</P>
    <button @click="abc(100)">更新年龄</button>
    <br />
    <button @click="newSex(200)">三秒后更新年龄</button>
  </div>
</template>

<script>
// 导入vuex中提供的一些方法
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  // data () {
  //   return {
  //     sex: 1777
  //   }
  // },
  computed: {
    // mapState提供一种简写方式:  ...mapState() 传想要获取的状态信息, 拿到当前页面作为计算属性使用
    // ...mapState(['sex', 'uname', 'list']),   // 数组写法

    // 给从state中获取的状态取别名，防止与当前页面重名，作为当前页面的计算属性
    ...mapState({ nianLing: 'sex', uname: 'uname', list: 'list' }),  // 对象写法, 相当于取别名, 防止与data中的变量重名

    // 将vuex中的getters拿到当前页面作为当前页面的计算属性
    ...mapGetters(['ccc', 'all'])
  },
  methods: {
    // 将vuex中mutations定义的方法拿到当前页面作为当前页面的方法
    ...mapMutations(['abc']),
    ...mapActions(['newSex'])
  }
}
</script>
<style lang="less" scoped></style>

　　根组件App.vue

<template>
  <div>
    <AnyOne></AnyOne>
    <hr />
    <AnyTwo></AnyTwo>
  </div>
</template>

<script>
import AnyOne from './components/AnyOne.vue'
import AnyTwo from './components/AnyTwo.vue'
export default {
  data () {
    return {}
  },
  components: {
    AnyOne,
    AnyTwo
  }
}
</script>
<style lang="less" scoped></style>

 

3、使用

 

4、简化调用数据

　　import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
　　通过vuex中的一些方法将定义的store中的内容拿到当前页面

 

5、分模块

　　在store目录下新建modules目录，用来存放各个模块的状态信息
　　分模块之后，在使用就需要加上模块名称，例如：$store.state.cart.list   获取cart模块中的list状态，调用方法也都是一样要加模块名的

　　src/store/modules/cart.js

import axios from 'axios'
export default {
  namespaced: true, //必须写
  // state 相当于vue中的data
  state: {
    list: []
  },
  // vueX中只能通过 mutations 修改数据  mutations 里边只能放同步方法
  mutations: {
    updateList (state, aaa) {
      state.list = aaa
    },
    finalList (state, obj) {
      let row = state.list.find(item => item.id === obj.id)
      row.count = obj.count
    }
  },
  //vueX 的计算属性 不支持set修改
  getters: {
    total (state) {
      return state.list.reduce((x, y) => x + y.count, 0)
    },
    newPrice (state) {
      return state.list.reduce((x, y) => x + y.count, 0)
    }
  },
  // actions 中调用 mutations 方法 因为 mutations 是vueX中修改数据的唯一方法且只能写同步方法,而 actions 可以放异步方法
  actions: {
    // 发送ajax请求 获取全部数据
    async getList (store) {
      const { data: res } = await axios.get('http://localhost:3000/list')
      // 调用 mutation 方法,更新list数据
      store.commit('updateList', res)
    },
    async updateList (store, obj) {
      // 一 更新服务器数据
      await axios.patch(`http://localhost:3000/list/${obj.id}`, obj)
      // 二 更新 vuex 数据
      store.commit('finalList', obj)
    }
  }
}

　　src/store/index.js

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

// 导入小模块
import cart from './modules/cart'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    // 模块名:导入的变量名
    // 'cart': cart
    cart  // 模块名和变量名一致可以简写
  }
})

　　main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store' // 导入store下的index.js   如果导入某个模块的index.js文件, 则可以省略

Vue.config.productionTip = false

new Vue({
  store, // 注册到vue中
  render: h => h(App)
}).$mount('#app')

　　根组件App.vue

<template>
  <div class="app-container">
    <!-- Header 区域 -->
    <cart-header></cart-header>

    <!-- 商品 Item 项组件 -->
    <cart-item
      v-for="item in $store.state.cart.list"  // 遍历模块cart中的数据, 模块中的list数据已经在created中的方法中异步更新了
      :key="item.id"
      :item="item"
    >
      <!-- 因为 vuex 是数据共享,可以不循环 不传值 其他组件也可以使用 -->
    </cart-item>

    <!-- Foote 区域 -->
    <cart-footer></cart-footer>
  </div>
</template>

<script>
import CartHeader from '@/components/cart-header.vue'
import CartFooter from '@/components/cart-footer.vue'
import CartItem from '@/components/cart-item.vue'

export default {
  name: 'App',
  components: {
    CartHeader,
    CartFooter,
    CartItem
  },
  created () { // 在这里调用cart模块中的异步方法
    this.$store.dispatch('cart/getList')  // 如果有参数传递, 则this.$store.dispatch('模块名/模块内actions中定义的方法', 方法所需的参数)
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 50px 0;
  font-size: 14px;
}
</style>

 

6、持久化存储到localStorage

 

存储token到vuex

　　之前，是将token存储到 localStorage 中。

　　这个项目将 token 存储到 vuex 仓库中，原因是：

1. token在其他组件、模块中都会用得到，属于公共数据
2. vuex 的仓库在内存中，读取、更新速度非常快
3. 有完备的 语法来操作 vuex仓库中的数据

【1】新建 store/modules/user.js

export default {
  namespaced: true, // 开启命名空间
  state: {
    token: ''
  },
  mutations: {
    updateToken (state, val) {
      state.token = val
    }
  }
}

【2】store/index.js 中导入模块，并注册模块

import Vue from 'vue'
import Vuex from 'vuex'
import user from '@/store/modules/user'
Vue.use(Vuex)

export default new Vuex.Store({
  // strict: true, // 此项可加可不加
  modules: { user }
})

【3】登录成功后，将token存储到 vuex 仓库

this.$store.commit('user/updateToken', res.data.token)

【4】退出的时候，移除token（修改token的值为空）

this.$store.commit('user/updateToken', '')

【5】请求拦截器，获取token

// 先导入store
import store from '@/store'

// 请求拦截器中，带请求头这里
config.headers.Authorization = 'Bearer ' + store.state.user.token 

【6】响应拦截器，如果是401错误，移除token

store.commit('user/updateToken', '')

【7】检查，登录后，尝试使用 vue 调试工具，查看 vuex 中是否有token。

 

持久化存储token

　　上述存储token，也有一定的问题，当页面刷新后，vuex 中的数据就会重置（毕竟是存在内存中），所以我们还需要将 vuex仓库中的数据，同步到 localStorage 中。这样数据就可以持久化存储了。

　　这里的实现方案有两个，一是自己写代码。二是使用插件。

　　我们选择使用插件：vuex-persist ，类似的插件还有 vuex-along 等等，非常多。

具体使用步骤：

【1】安装模块 

// pnpm方式
pnpm add vuex-persist 
// npm方式
npm i vuex-persist

【2】store/index.js 中，导入，创建对象，并设置为插件。

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
import user from '@/store/modules/user'
Vue.use(Vuex)
const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})
export default new Vuex.Store({
  // strict: true, // 此项可加可不加
  modules: { user },
  plugins: [vuexLocal.plugin]
})

设置完毕。

• 登录成功后

  • 会将 vuex 仓库的数据存储到 localStorage 中

• 刷新页面后

  • 会将 localStorage 中的数据恢复到 vuex仓库中