vuex状态管理

Vuex 是什么？ | Vuex

使用Vuex的好处

• 能够在vuex中集中管理共享的数据，易于开发和后期维护

• 能够高效的实现组件之间的数据共享，提高开发效率

• 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

什么样的数据存储在Vuex中

组件之间的共享数据

基本使用

1、安装vuex的依赖包

npm install vuex --save

2、导入vuex包

src/store/index.js

import Vue from 'vue
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({})

注册vuex

main.js

import store from '@/store'
new Vue({
...
store
}).$mount('#app')

组件访问state中数据的方式

方式一：

this.$store.state.属性名称

方式二

//1、从vuex中按需导入mapState函数
import {mapState} from 'vuex'
//2、将全局数据映射为当前组件的计算属性
computed:{
 ...mapState(['属性名'])
}
//可以直接在页面中像计算属性一样使用

Mutation 修改store中的共有数据

mutation中不可以写异步的代码

触发mutation的第一种方法

//定义Mutation
const store  = new Vuex.Store({
    state:{
    count:0
    },
    mutations:{
        add(state){
            //变更状态
            state.count++
        }
    }
})

在组件中触发mutation

methods:{
    handle(){
        //触发mutation的第一种方式
        this.$store.commit('add')
    }
}

nutation传递参数

第一个参数永远是自身的state，第二个参数可以传递新的值，或要修改的纬度

mutations:{
        add(state,step){
            //变更状态
            state.count+=step
        }
    }

methods:{
    handle(){
        //触发mutation的第一种方式
        this.$store.commit('add',3)
    }
}

触发mutation的第二种方法

//1、从vuex按需引入mapMutations函数
import {mapMutations} from 'vuex'
//2、将制定的mutations函数，映射为当前组件的methods函数
methods:{
    ...mapMutations(['add']),
    //点击方法
    btnclick(){
        this.add(3);
    }    
}

Action

触发action函数的第一种方式

用于执行异步的操做变更数据，不能使用mutation，但是在Action中还是要通过触发mutation的方式间接变更数据

只有mutation中定义的函数才有权利修改state中的数据

//定义Mutation
const store  = new Vuex.Store({
    state:{
    count:0
    },
    mutations:{
        add(state){
            //变更状态
            state.count++
        }
    },
    actions:{
        //context相当于new出来的store对象
        addAsync(context){
            setTimeout(()=>{
                context.commit('add')
            },1000)
        }
    }
})

触发action函数：dispatch

handle(){
    this.$store.dispatch('addAsync')
}

触发action时携带参数

mutations和actions中的方法都需要有一个形参，调用的时候将参数传递过来

mutations:{
        add(state,step){
            //变更状态
            state.count+=step
        }
    },
actions:{
        addAsync(context,step){
            setTimeout(()=>{
                context.commit('add',step)
            },1000)
        }
    }

handle(){
    this.$store.dispatch('addAsync',3)
}

触发action函数的第二种方式

//1、从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'
//2、将制定的actions函数，映射为当前组件的methods函数
methods:{
    ...mapActions(['addAsync'])
}

Getter

getter用于对store中的数据进行加工处理形成新的数据

对store中已有的数据加工处理形成新的数据， 不会改变原数据，只是对返回的数据做一层包装

store中的数据发生变化后，getter的数据也会跟着变化

定义getters

const store  = new Vuex.Store({
    state:{
        count:0
    },
    getters:{
        showNum(state){
            return '当前最新的数量是'+state.count
        }
    }
})

获取与使用

• 第一种方式

  this.$store.getters.showNum
  

• 第二种使用方式

  import {mapGetters} from 'vuex'
  computed:{
      ...mapGetters(['showNum'])
  }
  

  持久化存储

  vuex是为了管理项目中组件的状态，现在我理解为状态是交互的数据
  没有持久化的vuex 中的数据在js脚本加载的时候创建，存储在 内存 中，释放内存时就会消失（
  我理解的释放内存：刷新会释放内存，但是会重新加载；关闭浏览器：释放内存，不会重新加载数据）

数据持久化保存可以使用的机制有：
使用localstorage保存 存储数据没有时间限制，以 文件 形式存储在本地（永久存储） 不推荐
使用sessionStorage保存 用户关闭浏览器窗口后，数据会被删除（临时存储） 推荐

四个map方法

1. **mapState方法：**用于帮助我们映射state中的数据为计算属性

computed: {
  //借助mapState生成计算属性：sum、school、subject（对象写法）
   ...mapState({sum:'sum',school:'school',subject:'subject'}),

  //借助mapState生成计算属性：sum、school、subject（数组写法）
  ...mapState(['sum','school','subject']),
},

2. **mapGetters方法：**用于帮助我们映射getters中的数据为计算属性

computed: {
  //借助mapGetters生成计算属性：bigSum（对象写法）
  ...mapGetters({bigSum:'bigSum'}),

  //借助mapGetters生成计算属性：bigSum（数组写法）
  ...mapGetters(['bigSum'])
},

3. **mapActions方法：**用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
  //靠mapActions生成：incrementOdd、incrementWait（对象形式）
  ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  //靠mapActions生成：incrementOdd、incrementWait（数组形式）
  ...mapActions(['jiaOdd','jiaWait'])
}

4. **mapMutations方法：**用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

调用increment时传递参数

methods:{
  //靠mapActions生成：increment、decrement（对象形式）
  ...mapMutations({increment:'JIA',decrement:'JIAN'}),

  //靠mapMutations生成：JIA、JIAN（对象形式）
  ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

模块化+命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确。

2. 修改store.js

const countAbout = {
namespaced:true,//开启命名空间
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {
  bigSum(state){
     return state.sum * 10
  }
}
}

const personAbout = {
namespaced:true,//开启命名空间
state:{ ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
modules: {
  countAbout,
  personAbout
}
})

3. 开启命名空间后，组件中读取state数据：

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

4. 开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

5. 开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

6. 开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),