Vuex学习

Vuex

Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

1、安装vuex

#npm安装
npm install vuex --save
#yarn安装
yarn add vuex --save

#安装vuex 启动 报错 “export ‘watch‘ was not found in ‘vue‘
#如果你的vue版本是 2.X ，将vuex升到 3.X.X 就能够解决
npm install --save vuex@3.6.2

#如果你的vue版本是 3.X ，将vuex升到 4.X.X 就能够解决
npm install --save vue@3.0.2
npm install --save vuex@4.0.0

2、导入和注册vuex

在src目录下创建store目录并在目录下创建store.js,最后在main.js中引入store

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

Vue.use(Vuex)

export default new Vuex.Store({
    //State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。
    // state 中存放的就是全局共享的数据
    state: { count: 0 },
    //Mutation 用于变更 Store中 的数据
    //①只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
    //②通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
    mutations: {
        //自增不带参数
        add(state) {
            state.count++
        },
        //自增带参数
        add1(state, step) {
            state.count += step
        },
        //自减不带参数
        sub(state) {
            state.count--
        },
        //自减带参数
        sub1(state, step) {
            state.count -= step
        }
    },
    //Action 用于处理异步任务
    //如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。
    actions: {
        addAsync(context) {
            setTimeout(() => {
                context.commit('add')
            }, 1000)
        },
        subAsync(context) {
            setTimeout(() => {
                context.commit('sub')
            }, 1000)
        },
        add1Async(context, step) {
            setTimeout(() => {
                context.commit('add1', step)
            }, 1000)
        }, sub1Async(context, step) {
            setTimeout(() => {
                context.commit('sub1', step)
            }, 1000)
        }
    },
    //Getter 用于对 Store 中的数据进行加工处理形成新的数据。
    //①Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
    //②Store 中数据发生变化，Getter 的数据也会跟着变化。
    getters: {
        showNum: state => {
            return '当前最新的数量是【' + state.count + '】'
        }
    }
}
);

3、组件访问方式一

<template>
  <div>
    <h3>$store.state.全局数据访问</h3>
    <h3>当前最新制为：{{ $store.state.count }}</h3>
    <button @click="sub">内置-1</button>
    <button @click="sub1(3)">传递参数-</button>
        <button @click="subAsync">异步内置-1</button>
    <button @click="sub1Async(3)">异步传递参数-</button>
     <h3>$store.getters.名称</h3>
     <h3>{{$store.getters.showNum}}</h3>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    sub() {
        //this.$store.commit()触发mutations,不带参数
      this.$store.commit("sub");
    },
    sub1(num) {
        //this.$store.commit()触发mutations,带参数
      this.$store.commit("sub1", num);
    },
    subAsync() {
        //this.$store.dispatch()触发actions,不带参数
      this.$store.dispatch("subAsync");
    },
    sub1Async(num) {
        //this.$store.dispatch()触发actions,带参数
      this.$store.dispatch("sub1Async", num);
    },
  },
};
</script>

4、组件访问方式二

<template>
  <div>
    <h3>mapState将全局数据，映射为当前组件的计算属性</h3>
    <h3>当前最新制为：{{ count }}</h3>
    <button @click="add">内置+1</button>
    <button @click="add1(3)">传递参数+</button>
    <button @click="addAsync">异步内置+1</button>
    <button @click="add1Async(3)">异步传递参数+</button>
     <h3>mapGetters方式</h3>
     <h3>{{$store.getters.showNum}}</h3>
  </div>
</template>
<script>
//从 vuex 中按需导入 mapState 函数
//从 vuex 中按需导入 mapMutations 函数
//从 vuex 中按需导入 mapActions 函数
//从 vuex 中按需导入 mapActions 函数
import { mapState, mapMutations, mapActions,mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    //将指定的 mutations 函数，映射为当前组件的 methods 函数
    ...mapMutations(["add1", "add"]),
    //将指定的 actions 函数，映射为当前组件的 methods 函数
    ...mapActions(["addAsync", "add1Async"]),
  },
  computed: {
    //将全局数据，映射为当前组件的计算属性 
    ...mapState(["count"]),
      //getters 的第二种方式：
    ...mapGetters(['showNum'])
  },
};
</script>

5、Module

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

Vue.use(Vuex)

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

6、Vuex持久化

安装

yarn add vuex-persistedstate

界面引入

import Vue from 'vue'
import Vuex from 'vuex'
//引入插件
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {... },。
    mutations: {...},
    actions: {...},
    getters: {...},
    //vuex持久化
    //默认的存储方式是 localStorage
    plugins: [createPersistedState({
        storage: window.sessionStorage, // 存储方式改为sessionStorage
    })]
}
);