vuex 徹底複製https://blog.csdn.net/u012149969/article/details/80350907

時間 2019-11-16

標籤 vuex 徹底複製 https blog.csdn.net blog csdn u012149969 article details 简体版

原文原文鏈接

我們知道，vue項目當中的父子組件的交互是單通道傳遞，父組件經過props向子組件傳遞參數，而在子組件當中不不能直接修改接收的參數，而是須要經過自定義事件的方式，例如：javascript

<!-------------------------------------父組件--------------------------------->
<template>
  <div>
    <a href="javascript:;" @click="show = true">點擊</a>
    <t-dialog :show.sync="show"></t-dialog>
  </div>
</template>

<script>
<template>
    <div>
        {{isRed}}
        <children :isRed.sync="isRed"></children>
    </div>
</template>
<script>
    import children from "@/components/children"
    export default {
        data() {
            return {
                isRed: false//向子組件傳遞默認值
            }
        },
        components: {
            children
        }
    }
</script>
<!-------------------------------------子組件--------------------------------->
<template>
     <div>
         <input type="button" :class="{active:isRed}"  value="改變" @click="change">
     </div>
</template>
<script>
    export default {
        props:['isRed'],
        methods:{
            change(){
                //取反改變父組件的值
                this.$emit("update:isRed",!this.isRed);
            }
        }

    }
</script>
<style scoped>
    .active{
        background:red;
    }
</style>

這樣是否是很麻煩？若是用vuex就會變的很是簡單！
一、首先用npm包管理工具，安裝vuexcss

//由於這個包在生產環境中也要使用，因此在這裏必定要加上 –save
npm install vuex --save

二、而後在main.js當中引入vuexvue

import vuex from 'vuex'

三、使用vuexjava

Vue.use(vuex);//使用vuex
//建立一個常量對象
const state={
    isRed:false
}
var store = new vuex.Store({//建立vuex中的store對象
    state
})

四、隨後在實例化Vue對象時，加入store對象：node

new Vue({
    el: '#app',
    router,
    store,//使用store
    template: '<App/>',
    components: { App }
})

五、最後再將最初的示例修改成：python

<!-------------------------------------父組件--------------------------------->
<template>
    <div>
        {{$store.state.isRed}}
        <children></children>
    </div>
</template>
<script>
    import children from "@/components/children"
    export default {
        components: {
            children
        }
    }
</script>
<!-------------------------------------子組件--------------------------------->
<template>
     <div>
         <input type="button" 
                :class="{active:$store.state.isRed}"  
                value="改變"
               @click="$store.state.isRed=!$store.state.isRed">
     </div>
</template>
<script>
    export default {}   
</script>
<style scoped>
    .active{
        background:red;
    }
</style>

　　到目前爲止，這個示例就被簡化了不少？
前面將代碼都寫到了main.js中了，爲了往後便於維護，更好的管理vuex，最好對vuex進行一些調整。
一、在src文件夾根目錄建立vuex文件夾，而後在該文件夾內建立store.js文件。而後在文件內引入vue和vuex。webpack

import Vue from 'vue';
import Vuex from 'vuex';

　　二、而後使用Vuexweb

Vue.use(Vuex );//使用Vuex 
//建立一個常量對象
const state={
    isRed:false
}
//讓外部引用vuex
export default new Vuex.Store({//建立vuex中的store對象
    state
})

　　三、而後將main.js以前寫入的與vuex相關的內容清除掉，引入剛剛建立的store.js文件vuex

import store from '@/vuex/store'

　　四、在實例化Vue對象時，加入引入的store對象：vue-cli

new Vue({
    el: '#app',
    router,
    store,//使用store
    template: '<App/>',
    components: { App }
})

　　五、npm run dev，正常運行！
六、未完，待續！

哈哈哈原本打算七篇放一塊兒的太懶了。算了。要就去看吧

一、首先經過vue-cli生成一個名字叫作demo的項目

vue init webpack demo

二、項目搭建完成之後，安裝vuex

npm  install vuex --save

三、在src目錄下建立vuex文件夾，而後在該文件夾下建立一個名字叫作store的js文件

四、在store.js中寫入如下代碼：

import Vue from 'vue';//引用vue
import Vuex from 'vuex';//引用vuex
Vue.use(Vuex);//使用vuex
const state={
    nodeVoteCount:0,//node的初始票數
    vueVoteCount:0,//vue的初始票數
}
export default new Vuex.Store({////暴露Store對象
    state
})

五、在main.js當中引入在store.js文件當中建立的store對象，並在Vue實例中添加

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store'//導入store.js
Vue.config.productionTip = false
new Vue({
    el: '#app',
    router,
    store,//添加store
    components: { App },
    template: '<App/>'
})

六、修改App.vue爲：

<template> <div id="app"> <!--經過$store.state.nodeVoteCount得到nodeVoteCount的狀態值 經過$store.state.vueVoteCount得到vueVoteCount的狀態值--> <div><h2>總票數：{{$store.state.nodeVoteCount+$store.state.vueVoteCount}}</h2></div> <div> <img src="./assets/node.png"> <h3>如何經過node.js對數據進行MD5加密</h3> <input type="button" value="投票">票數:{{$store.state.nodeVoteCount}} </div> <hr/> <div> <img src="./assets/vuex.png"> <h3>真正掌握vuex的使用方法（一）</h3> <input type="button" value="投票">票數：{{$store.state.vueVoteCount}} </div> </div> </template> <script> export default { name: 'App' } </script>

七、到如今爲你，初始的票數已經被我們獲取到了。
不過有心的你應該已經發現了：當得到vuex狀態值的時候代碼好長，好囉嗦，好不方便！不過不要緊，vuex爲偉大的你提供了一種十分簡便方法。
- 首先在App.vue當中的script內引入vuex

import vuex from "vuex";

而後在computed計算屬性裏寫以下代碼：

computed:vuex.mapState(["vueVoteCount","nodeVoteCount"])
或
computed:vuex.mapState({//mapState方法最終返回的是一個state對象。
    vueVoteCount:state=>state.vueVoteCount,
    nodeVoteCount:(state)=>state.nodeVoteCount
})

再而後修改App.vue的template爲：

 <div id="app"> <!--是否是很方便？直接寫狀態名稱便可--> <div><h2>總票數：{{nodeVoteCount+vueVoteCount}}</h2></div> <div> <img src="./assets/node.png"> <h3>如何經過node.js對數據進行MD5加密</h3> <input type="button" value="投票">票數:{{nodeVoteCount}} </div> <hr/> <div> <img src="./assets/vuex.png"> <h3>真正掌握vuex的使用方法（一）</h3> <input type="button" value="投票">票數：{{vueVoteCount}} </div> </div>

通過上面的代碼調整之後，你會發現調取vuex的狀態值簡便了很多。
不過設置mapState也要花費一些精力。
那麼我們再經過ES6的知識再將上面的JS部分進行一番優化。
- 首先我們將引入的vuex那部分修改成：

import {mapState} from "vuex";//經過ES6的對象解構賦值

而後在使用mapSate的時候，我們就能夠省略一級對象（vuex）,即computed修改成：

computed:mapState(["vueVoteCount","nodeVoteCount"])
或
computed:mapState({ vueVoteCount:state=>state.vueVoteCount, nodeVoteCount:(state)=>state.nodeVoteCount })

如今有的小夥伴是否是在想，之後若是我要在這裏寫本身的計算屬性怎麼辦？怎麼辦？我們能夠經過對象合併的方法去實現。
經過Object.assign()合併對象：

//Object.assign()方法的第一個參數爲目標對象，其他參數爲源對象。
//經過該方法能夠將全部源對象的值copy到目標對象。
//該方法的返回值即爲這個目標對象
computed:Object.assign(mapState(["vueVoteCount","nodeVoteCount"]),{
    //本身的計算屬性能夠在這裏面寫哦
}),
//或
computed:Object.assign(mapState({
    vueVoteCount:state=>state.vueVoteCount,
    nodeVoteCount:(state)=>state.nodeVoteCount
}),{
   //本身的計算屬性能夠在這裏面寫哦
})

固然也能夠用…(擴展運算符）來合併對象

computed:{
    ...mapState(["vueVoteCount","nodeVoteCount"]),
    ...{
        //本身的計算屬性能夠在這裏面寫哦
    }
}
//或
computed:{
    ...mapState({
        vueVoteCount:state=>state.vueVoteCount,
        nodeVoteCount:(state)=>state.nodeVoteCount
    }),
    ...{
        //本身的計算屬性能夠在這裏面寫哦
       }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。