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 --
}
}
});
项目打包部署上线
生产环境之前，打包上传到服务器的二级目录的时候，将config文件夹的index.js里的build下面的assetsPublicPath改成 ‘./’，如果是直接放到根目录，那就什么都不用改，还是’/’
生产环境
npm run build
会打包生成在dist内，有index.html和static 都是转码后的文件以供系统阅读
dist
将这两个文件直接放入服务器目录下即可
访问项目
获取天气地图翻译等API
