Vue.js 学习足迹(六)

Z时代
2024-01-10
分类：综合

vue

文章目录

Vue.js核心组件vuex

vuex融入到项目

项目打包部署上线

Vue.js核心组件vuex

vuex是一种状态管理模式
什么是vuex?
请访问文档https://vuex.vuejs.org/zh/

vuex的核心概念的应用

1.cnpm i vue
2.cnpm i vuex
3.引入
 		<script src="node_modules/vue/dist/vue.js"></script>
		<script src="node_modules/vuex/dist/vuex.js"></script>

vuex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vuex/dist/vuex.js"></script>
</head>
<body>
    <div id="app">
        <con></con>
        <button @click="add"> 加入购物车 </button>
    </div>
    <script>
        //自定义组件
        let con = {
            template:'' +
                '<div>' +
                '<h2>{{num}}</h2>' +
                '<h2>{{title}}</h2>' +
                '<h2>{{changeGetter}}</h2>' +
                '</div>',
            computed:{
                //监听变量
                num(){
                    return this.$store.state.num
                },
                title(){
                    return this.$store.state.title
                },
                changeGetter(){
                    return this.$store.getters.changeGetter
                }
            }
        };
        let store = new Vuex.Store({
           state:{
               num:1,
               title:''
           },
            getters:{   //扩展,定义变量初始化显示
                changeGetter(state){
                    return state.num = 0
                }
            },
            //点击按钮add 提交mutations,改变num状态state
            mutations:{
               //声明要做的事情
                increment(state,i){
                    state.num += i
                },
                title(state,str){
                    state.title = str;
                }
            },
            //用于提交title的选项
            actions:{
               titleAction(context,str){
                   context.commit('title',str)
               }
            }
        });
        new Vue({
            el:'#app',
            //安装
            store,
            //声明组件
            components:{
                con
            },
            methods:{
              add(){
                  //点击按钮add提交事件increment
                  this.$store.commit('increment',1);
                  //点击按钮add提交事件titleAction
                  this.$store.dispatch('titleAction','vuextitle')
              }
            }
        })
    </script>
</body>
</html>

vuex融入到项目

1.cnpm i vuex -S

2.引入插件

main.js

//引入插件 vuex
import Vuex from 'vuex'
Vue.use(Vuex);
let store = new Vuex.Store({
   state:{
       num:0,
   },
    mutations:{
       // mutations 声明要做的事情
       addCartCount(state){
           state.num ++
       },
        reduceCartCount(state){
           if(state.num <=0) return
           state.num --
        }
    }
});