vue | vuex篇

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

 结构图：

state：定义公共状态（只读的，无法修改）

getters：可理解为vuex中的计算属性（使用某个state时，不是使用原值，而是需要派生出一个新的值）

mutations：同步方法（定义mutation来修改state）

        更改vuex的store中的状态唯一方法是提交mutation

actions：异步方法（提交的是mutation而不是直接改变状态）

        得到数据后调用mutation赋值给state 或 dispatch action触发mutation修改state。

modules：模块化

✎  应用的集中管理放在store中，改变状态必须要经过commit。

     同步状态提交的是mutations,异步是先通过actions再通过mutations。

1.简单store模式：

 使用场景：中小型项目，组件的公共状态不多的情况下 ，使用简单的 store 模式 (opens new window)。

// store.js

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

Vue.use(Vuex)

export const store = Vuex.Store({
  state: { 
    name:'张三',
    age:'18',
  },
})

<template>
    <div>
        <h1>父组件</h1>
        <h1>{{getname}}</h1>
    </div>
</template>

<script>
import { store } from '@/store/store.js'  //按需引入
export default{
    computed:{
        getname(){
            return store.state.name
        }
    },
}
</script>

2.vuex模式：

使用场景：中大型项目 ，多个组件公共状态较多的情况下，使用vuex。

export default new Vuex.Store({
  state: { 
    name:'张三',
    age:'18',
  },
  getters: { 
    nameChange(state){
      return state.name+'-getters'
    },
  },
  mutations: {
    ADDAGE(state){
      return state.age++
    },
  },
  actions: {
    REDAGE({state}){
      return state.age--
    },
  }
})

<template>
    <div>
        <h1>父组件</h1>
        <h2>state:{{$store.state.name}} - 辅助函数：{{name}}</h2>
        <hr/>
        <h2>getters:{{$store.getters.nameChange}} - 辅助函数：{{nameChange}}</h2>
        <hr/>
        <h2>mutations: 年龄{{$store.state.age}}</h2>
        <button @click="ADDAGE">同步增加</button>
        <hr/>
        <h2>actions:</h2>
        <button @click="REDAGE">异步减少</button>
    </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex' //辅助函数的使用方法
export default{
    data(){
        return{

        }
    },
    computed:{
        ...mapState(['name']),
        ...mapGetters(['nameChange']),
    },
    methods:{
        // ADDAGE(){
        //     this.$store.commit("ADDAGE")
        // },
        // ADDMORE(){
        //     this.$store.dispatch("ADDMORE")
        // },
        ...mapMutations(['ADDAGE']),
        ...mapActions(['REDAGE']),
    }
    
}
</script>

//main.js 

import Vue from 'vue'
import App from './App.vue'
import store from './store'   //全局引入

Vue.config.productionTip = false

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

展示效果：

3.modules模块化：

使用场景：vuex仓库数据很多的时，通过模块化管理

✎  新建modules文件夹把所有模块得内容都放里面，index.js文件做模块导出处理

//user.js 

export default ({
    state: { 
        name:'张三',
        age:'18',
    },
    getters: { 
      nameChange(state){
        return state.name+'-getters'
      },
    },
    mutations: {
      ADDAGE(state){
        state.age++
      },
    },
    actions: {
      REDAGE({state}){
        state.age--
      },
    },
})

//index.js

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

Vue.use(Vuex)

import user from '@/store/modules/user'
export default new Vuex.Store({
  modules:{
    user
  }
})

//index.vue
//注意点：模块化时要 $store.state.模块名.数据

<template>
    <div>
        <h1>父组件</h1>
        <h2>state:{{$store.state.user.name}} - 辅助函数：{{user.name}}</h2>
        <hr/>
        <h2>getters:{{$store.getters.nameChange}} - 辅助函数：{{nameChange}}</h2>
    </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex' 
export default{
    computed:{
        ...mapState(['user']),  //取出模块化对象
        ...mapGetters(['nameChange']),
    },
}
</script>

展示效果：

✎  注意点：

vuex不是持久化存储数据(store里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化)。

解决方案：

1.利用缓存。把vuex中的state在本地缓存（本地存储的内容是存在浏览器里，不会因为刷新而丢失）中备份一下，当状态发生改变时，同步缓存备份。

2.使用插件 vuex-persistedstate。安装： npm i vuex-persistedstate -S

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
  plugins:[createPersistedState()]
})