VUEX：store，在HBuilder中实现vuex，可以进行点击加减号后数值改变等等【诗书画唱】
目录：
知识
显示store中变量值到HTML页面的方法就是使用this.$store.state
个人理解：vuex类似于封装，像一个管理很多呈现在HTML界面的仓库（store），这个vuex的store仓库里有很多车间，某个车间都是做不同的业务处理，mutations就是进行和修改内容的函数有关的业务，比如放 increment(s){s.count ++}之类的函数。
例子
例子1：在HBuilder中实现vuex，可以进行点击加号按钮后，数字+1，点击减号按钮后数字-1，点击“改变”按钮后，原本HTML界面的'你好'的文本变成'再见'，并且每次点击“改变”按钮，数字的数值+7
例子2：在VScode中实现vuex，可以进行点击加号按钮后，数字+1，点击减号按钮后数字-1，点击“改变”按钮后，原本HTML界面的'你好'的文本变成'再见'
demo.vue
index.js
main.js
知识
vue全家桶：vue脚本库+router路由+axios跨域访问+vuex存放项目全局数据仓库+ui界面
"vuex：核心是一个store的对象，可以存放数据，这些数据在任何的组件上都可以使用。
你可以对这些数据进行操作（这些数据不能够直接修改）"
组件之间或者页面之间需要传递数据的话，就可以把这些数据存放到store里面，store相当于application一样。
如果你的项目比较简单，建议不要使用vuex。
let store = {flag:true,ct:10};
store.flag = false;//这样直接修改是不行的，没有用
显示store中变量值到HTML页面的方法就是使用this.$store.state
个人理解：vuex类似于封装，像一个管理很多呈现在HTML界面的仓库（store），这个vuex的store仓库里有很多车间，某个车间都是做不同的业务处理，mutations就是进行和修改内容的函数有关的业务，比如放 increment(s){s.count ++}之类的函数。
例子
例子1：在HBuilder中实现vuex，可以进行点击加号按钮后，数字+1，点击减号按钮后数字-1，点击“改变”按钮后，原本HTML界面的'你好'的文本变成'再见'，并且每次点击“改变”按钮，数字的数值+7
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
<script type="text/javascript" srcc="js/vuex.js" ></script>
</head>
<body>
<div id="app">
<input type="button" value="+" @click="add" />
<h1>{{this.$store.state.count}}</h1>
<input type="button" value="-" @click="reduce"/>
<h1>{{this.$store.getters.deal}}</h1>
<input type="button" value="改变文本并且每次点一次都数字加7" @click="change"/>
</div>
<script>
//获取全局数据仓库
let store = new Vuex.Store({
state: {
count: 0,
isShow:true
},
getters: {
deal(s){
return s.isShow ? '你好' : '再见';
}
},
mutations: {
increment(s){s.count ++},
inreduce(s){s.count --},
inchange(s,num){
s.count += num;
s.isShow = false;
}
},
actions: {
cg(ctx,num){//ctx就是store对象
ctx.commit('inchange',num);
}
}
});
new Vue({
el: '#app',
store,
methods: {
add(){
//不能够直接修改store.state.count的值
this.$store.commit('increment');
},
reduce(){
this.$store.commit('inreduce');
},
change(){
//commit方法用来触发mutations
//this.$store.commit('inchange',8);
//dispatch方法用来触发actions
this.$store.dispatch('cg',7);
}
}
});
</script>
</body>
</html>
例子2：在VScode中实现vuex，可以进行点击加号按钮后，数字+1，点击减号按钮后数字-1，点击“改变”按钮后，原本HTML界面的'你好'的文本变成'再见'
npm install vuex --save
//自己在src目录下的main.js中加的关于vuex的代码 START
import vuex from 'vuex'
Vue.use(vuex)
//获取全局的数据仓库
const store = new vuex.Store({
state: {
count: 0,
isShow: true
},
getters: {
text(s){
return s.isShow ? '你好' : '再见';
}
},
mutations: {
inadd(s){
s.count ++
},
inreduce(s){
s.count --
},
inchange(s){
s.isShow = !s.isShow;
}
},
actions: {}
})
//自己在src目录下的main.js中加的关于vuex的代码 END
//自己加的代码 START
store,
//自己加的代码 END
store,
//自己加的代码 END 这类的部分少写了，也会导致报错
demo.vue
<template>
<div>
<input type="button" value="+" @click="add"/>
<h1>{{$store.state.count}}</h1>
<input type="button" value="-" @click="reduce"/>
<h1>{{$store.getters.text}}</h1>
<input type="button" value="切换" @click="cg"/>
</div>
</template>
<script>
export default {
methods: {
add(){
this.$store.commit('inadd');
},
reduce(){
this.$store.commit('inreduce');
},
cg(){
this.$store.commit('inchange');
}
}
}
</script>
<style>
</style>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//自己加入的必须加载和要使用组件的代码 START
//一般我一些代码都不删除，只注释掉
// import Select1 from '@/components/Select1'
import index from '@/page/index'
//chong_ming_yan_zheng:重名验证
import chong_ming_yan_zheng from '@/components/chong_ming_yan_zheng'
import Dm from '@/page/demo'
//自己加入的必须加载和要使用组件的代码 END
Vue.use(Router)
export default new Router({
routes: [
// {//http://localhost:8080/#/Select1
// path: '/Select1',
// name: 'Select1',//路由跳转时使用
// component: Select1
// },
{//http://localhost:8080/#/index
path: '/index',
name: 'index',//路由跳转时使用
component: index
},
{//http://localhost:8080/#/chong_ming_yan_zheng
path: '/chong_ming_yan_zheng',
name: 'chong_ming_yan_zheng',//路由跳转时使用
component: chong_ming_yan_zheng
},
{//http://localhost:8080/#/dm
path: '/dm',
name: 'Dm',//路由跳转时使用
component: Dm
}
//自己加的代码 END
]
})
//解决重复点击路由，界面跳转等时报错的代码 START
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
//解决重复点击路由，界面跳转等时报错的代码 END
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import vuex from 'vuex'
//自己在src目录下的main.js中加的关于vuex的代码 START
Vue.use(vuex)
//获取全局的数据仓库
const store = new vuex.Store({
state: {
count: 0,
isShow: true
},
getters: {
text(s){
return s.isShow ? '你好' : '再见';
}
},
mutations: {
inadd(s){
s.count ++
},
inreduce(s){
s.count --
},
inchange(s){
s.isShow = !s.isShow;
}
},
actions: {}
})
//自己在src目录下的main.js中加的关于vuex的代码 END
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
//自己加的代码 START
store,
//自己加的代码 END
router,
components: { App },
template: '<App/>'
})
npm run dev
http://localhost:8080/#/dm
