VUEX：store，在HBuilder中實現(xiàn)vuex，可以進行點擊加減號后數(shù)值改變等等【詩書畫唱】
目錄：
知識
顯示store中變量值到HTML頁面的方法就是使用this.$store.state
個人理解：vuex類似于封裝，像一個管理很多呈現(xiàn)在HTML界面的倉庫（store），這個vuex的store倉庫里有很多車間，某個車間都是做不同的業(yè)務(wù)處理，mutations就是進行和修改內(nèi)容的函數(shù)有關(guān)的業(yè)務(wù)，比如放?increment(s){s.count ++}之類的函數(shù)。
例子
例子1：在HBuilder中實現(xiàn)vuex，可以進行點擊加號按鈕后，數(shù)字+1，點擊減號按鈕后數(shù)字-1，點擊“改變”按鈕后，原本HTML界面的'你好'的文本變成'再見'，并且每次點擊“改變”按鈕，數(shù)字的數(shù)值+7
例子2：在VScode中實現(xiàn)vuex，可以進行點擊加號按鈕后，數(shù)字+1，點擊減號按鈕后數(shù)字-1，點擊“改變”按鈕后，原本HTML界面的'你好'的文本變成'再見'
demo.vue
index.js
main.js
知識
vue全家桶：vue腳本庫+router路由+axios跨域訪問+vuex存放項目全局數(shù)據(jù)倉庫+ui界面
"vuex：核心是一個store的對象，可以存放數(shù)據(jù)，這些數(shù)據(jù)在任何的組件上都可以使用。
你可以對這些數(shù)據(jù)進行操作（這些數(shù)據(jù)不能夠直接修改）"
組件之間或者頁面之間需要傳遞數(shù)據(jù)的話，就可以把這些數(shù)據(jù)存放到store里面，store相當于application一樣。
如果你的項目比較簡單，建議不要使用vuex。
let store = {flag:true,ct:10};
store.flag = false;//這樣直接修改是不行的，沒有用
顯示store中變量值到HTML頁面的方法就是使用this.$store.state
個人理解：vuex類似于封裝，像一個管理很多呈現(xiàn)在HTML界面的倉庫（store），這個vuex的store倉庫里有很多車間，某個車間都是做不同的業(yè)務(wù)處理，mutations就是進行和修改內(nèi)容的函數(shù)有關(guān)的業(yè)務(wù)，比如放?increment(s){s.count ++}之類的函數(shù)。
例子
例子1：在HBuilder中實現(xiàn)vuex，可以進行點擊加號按鈕后，數(shù)字+1，點擊減號按鈕后數(shù)字-1，點擊“改變”按鈕后，原本HTML界面的'你好'的文本變成'再見'，并且每次點擊“改變”按鈕，數(shù)字的數(shù)值+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="改變文本并且每次點一次都數(shù)字加7" @click="change"/>
</div>
<script>
//獲取全局數(shù)據(jù)倉庫
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方法用來觸發(fā)mutations
//this.$store.commit('inchange',8);
//dispatch方法用來觸發(fā)actions
this.$store.dispatch('cg',7);
}
}
});
</script>
</body>
</html>
例子2：在VScode中實現(xiàn)vuex，可以進行點擊加號按鈕后，數(shù)字+1，點擊減號按鈕后數(shù)字-1，點擊“改變”按鈕后，原本HTML界面的'你好'的文本變成'再見'
npm?install?vuex?--save
//自己在src目錄下的main.js中加的關(guān)于vuex的代碼?START
import?vuex?from?'vuex'
Vue.use(vuex)
//獲取全局的數(shù)據(jù)倉庫
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中加的關(guān)于vuex的代碼??END
//自己加的代碼?START
store,
//自己加的代碼?END
store,
//自己加的代碼 END? 這類的部分少寫了，也會導(dǎo)致報錯
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',//路由跳轉(zhuǎn)時使用
??//???component:?Select1
??//?},
???{//http://localhost:8080/#/index
????path:?'/index',
????name:?'index',//路由跳轉(zhuǎn)時使用
????component:?index
??},
{//http://localhost:8080/#/chong_ming_yan_zheng
??path:?'/chong_ming_yan_zheng',
??name:?'chong_ming_yan_zheng',//路由跳轉(zhuǎn)時使用
??component:?chong_ming_yan_zheng
},
?{//http://localhost:8080/#/dm
??path:?'/dm',
??name:?'Dm',//路由跳轉(zhuǎn)時使用
??component:?Dm
}
????//自己加的代碼?END
??]
})
//解決重復(fù)點擊路由，界面跳轉(zhuǎn)等時報錯的代碼?START
const?originalPush?=?Router.prototype.push
Router.prototype.push?=?function?push?(location)?{
??return?originalPush.call(this,?location).catch(err?=>?err)
}
//解決重復(fù)點擊路由，界面跳轉(zhuǎn)等時報錯的代碼?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中加的關(guān)于vuex的代碼?START
Vue.use(vuex)
//獲取全局的數(shù)據(jù)倉庫
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中加的關(guān)于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
