vuex的五大核心

目录

  1. vuex是什么

  2. vuex 的五个核心概念

    • State 定义状态(变量)

    • Getter 获取状态(变量的值)

    • Mutation 修改状态(修改变量的值)

    • Action 触发 mutation 函数,从而修改状态

    • Module 当状态很多时,把状态分开来管理

  3. 通过vuex进行跨组件通信

  4. vuex 本地持久化

(一) vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

  1. 状态: 本质上就是一个变量,赋予不同的值就是不同的状态,管理状态实际上就是管理一堆变量

  2. 响应式,vuex跟全局变量不同,修改了vuex的某个状态,依赖这个状态的视图都会发生改变

(二) vuex的5个核心概念

1. State 定义状态(变量), 辅助函数mapState
  1. Getter 获取状态(变量的值),同时可以对状态进行处理, 辅助函数mapGetters

  2. Mutation 修改状态(修改变量的值)

  3. Action 触发 mutation 函数,从而修改状态,支持异步

  4. Module 当状态很多时,把状态分开来管理

(三) 配置vuex

  1. 安装vuex
npm i vuex
  1. vuex配置

    在根目录新建/store/index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    ​
    Vue.use(Vuex);
    ​
    const config = {
     // 定义状态
     state: {
     isLogin: false
     },
    ​
     // getters
     getters: {
     // isLogin:(state) =>{
     //     return state.isLogin;
     // },
     // 等同上面的写法
     isLogin: state => state.isLogin
     },
    ​
     // 修改state里面的变量
     mutations: {
     // state指向上面的state,payload是调用muation时传过来的参数
     updateLogin(state, payload) {
     state.isLogin = payload;
     }
     },
    ​
     // action行为
     actions: {
    ​
     },
    ​
     // module
     modules: {
    ​
     }
    }
    export default new Vuex.Store(config);
    
  2. 在main.js导入并挂载到vue的实例上
    mport Vue from 'vue'
    import App from './App.vue'
    import store from './store/index'
    ​
    Vue.config.productionTip = false
    ​
    new Vue({
     store,
     render: h => h(App),
    }).$mount('#app')
    

(四) 获取在vuex定义的状态

  1. 通过this.$store.state.xxx 来取,具体使用
    created() {
    console.log(this.$store.state.isLogin);
    console.log(this.$store.state.firstName);
    }
    ​
    // 通常我们会定义计算属性来取值,比如
    computed: {
    // 自定义计算属性
    isLogin() {
    // 获取vuex的isLogin的值
    return this.$store.state.isLogin
    }
    }
    
  2. 通过辅助函数mapState来获取
    data() {
        return {
            addr: '广西'
         };
    },
    
    computed: mapState({
    // 取state里count的值
    count: 'count',
    // 取state里count的值,用countAlias变量接收
    countAlias: 'count',
    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    fullName(state) {
    return this.addr + state.firstName + state.lastName;
    }
    })
    
    // 如果需要定义其它的计算属性,就按照下面的写法
    computed: {
    // 其他的计算属性
    total() {
    return 500
    },
    ...mapState({
    // 取state里count的值
    count: 'count',
    // 取state里count的值,用countAlias变量接收
    countAlias: 'count',
    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    fullName(state) {
    return this.addr + state.firstName + state.lastName;
    }
    })
    }
    
    
    
    
  3. 通过getters和mapGetters来取
// 定义一个用来获取fullName的getter
  getters: {
  fullName(state) {
  return state.firstName + state.lastName;
  }
  },
 ​
 // 通过mapGetters
 import {mapGetters} from 'vuex';
 ​
 computed: {
  fullName() {
  return this.$store.getters.fullName;
  }
 }

(五) 修改state中的状态

  1. 定义state和mutation
import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    ​
    export default new Vuex.Store({
     state: {
     name: "没名字",
     count: 1
     },
     getters: {
    ​
     },
     // 修改state里的值必须通过mutation来修改
     mutations: {
     /**
     * 定义一个修改name的mutation
     * state是上面的定义的state
     * payload是新的数据
     */
     updateName(state, payload) {
     state.name = payload;
     }
     }
    })
  1. 在需要的时候调用mutation进行修改state里的name状态
// 第一个参数是mutation的名字,第二参数是要修改成的数据
    this.$store.commit('updateName','老胡');

(六) 综合例子: 通过vuex实现加减

  1. 在vuex里配置state和mutation
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    ​
    export default new Vuex.Store({
     state: {
     count: 0
     },
    ​
     mutations: {
     addOne(state, payload) {
     state.count = state.count + 1;
     },
     minusOne(state, payload) {
     if (state.count > 0) {
     state.count = state.count - 1;
     }
     }
     }
    })
  1. index.vue的配置
 <template>
     <div>
     <button @click="minus">-</button>
     <span>{{count}}</span>
     <button @click="add">+</button>
     </div>
    </template>
    ​
    <script>
    import { mapState } from "vuex";
    export default {
     computed: mapState({
     count: "count"
     }),
    ​
     methods: {
     add() {
     this.$store.commit("addOne");
     },
     minus() {
     this.$store.commit("minusOne");
     }
     }
    };
    </script>

(六) vuex 本地持久化

当刷新页面,项目重新加载,vuex 会重置,所有状态回到初始状态,使用 vuex-persistedstate 可以避免这种情况

  1. 安装 vuex-persistedstate
    npm i vuex-persistedstate
    
  2. 在vuex中,添加plugins
    import createPersistedState from 'vuex-persistedstate'
    
     plugins: [createPersistedState()],
    
    // 具体例子如下
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
// 导入模块
import login from './module/login'
import my from './module/my'
Vue.use(Vuex);
export default new Vuex({
 plugins: [createPersistedState()],
 // 模块
 modules: {
 login,
 my
 },
 state: {
 isLogin: false,
 username: '',
 token: ''
 },
 getters: {
 isLogin: state => state.isLogin,
 token: state => state.token,
 username: state => state.username
 },
 mutations: {
 updateLogin(state, payload) {
 state.isLogin = payload;
 },
 updateToken(state, payload) {
 state.token = payload;
 },
 updateUsername(state, payload) {
 state.username = payload;
 }
 },
 actions: {
 LoginAction({commit}, payload) {
 commit('updateLogin',payload)
 },
 TokenAction({commit}, payload) {
 commit('updateToken',payload)
 },
 UsernameAction({commit}, payload) {
 commit('updateUsername',payload)
 },
 }
})

(七) modules的使用

  1. 配置模块的vuex
export default {
     state: {
     cartNum: 10
     },
    ​
     getters: {
    ​
     },
    ​
     mutations: {
     updateCartNum(state, payload) {
     state.cartNum = payload;
     }
     },
    ​
     actions: {
    ​
     }
    }
  1. 获取状态
     <template>
     <div>{{cartNum}}</div>
    </template>
    ​
    <script>
    import { mapState } from "vuex";
    export default {
     computed: mapState({
     cartNum(state) {
     return state.cart.cartNum;
     }
     })
    };
    </script>
  1. 修改状态
this.$store.commit("updateCartNum", 200);

(八) acion

Action 类似于 mutation,都是用来修改vuex的状态, 不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。

  • Action 可以包含任意异步操作。

  1. 配置action
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    ​
    export default new Vuex.Store({
     state: {
     num: 10
     },
    ​
     mutations: {
     updateNum(state, payload) {
     state.num = payload;
     }
     },
    ​
     actions: {
     /**
     * 修改num的action
     * @param {*} ctx 可以拿到一个类似store的实例
     * @param {*} payload 修改的数据
     */
     updateNum(ctx, payload) {
     setTimeout(() => {
     ctx.commit('updateNum', payload);
     }, 3000)
     }
     }
    })
  1. 派发action,在需要的地方,调用以下方法
    this.$store.dispatch("updateNum", 500);
image

推荐阅读更多精彩内容