咱们知道，vue项目当中的父子组件的交互是单通道传递，父组件通过props向子组件传递参数，而在子组件当中不不能直接修改接收的参数，而是需要通过自定义事件的方式，例如：
<!-------------------------------------父组件--------------------------------->
<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就会变的非常简单！
1、首先用npm包管理工具，安装vuex
//因为这个包在生产环境中也要使用，所以在这里一定要加上 –save npm install vuex --save
2、然后在main.js当中引入vuex
import vuex from 'vuex'
3、使用vuex
Vue.use(vuex);//使用vuex
//创建一个常量对象
const state={
isRed:false
}
var store = new vuex.Store({//创建vuex中的store对象
state
})
4、随后在实例化Vue对象时，加入store对象：
new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})
5、最后再将最初的示例修改为：
<!-------------------------------------父组件--------------------------------->
<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进行一些调整。
1、在src文件夹根目录创建vuex文件夹，然后在该文件夹内创建store.js文件。然后在文件内引入vue和vuex。
import Vue from 'vue'; import Vuex from 'vuex';
2、然后使用Vuex
Vue.use(Vuex );//使用Vuex
//创建一个常量对象
const state={
isRed:false
}
//让外部引用vuex
export default new Vuex.Store({//创建vuex中的store对象
state
})
3、然后将main.js之前写入的与vuex相关的内容清除掉，引入刚刚创建的store.js文件
import store from '@/vuex/store'
4、在实例化Vue对象时，加入引入的store对象：
new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})
5、npm run dev，正常运行！
6、未完，待续！
哈哈哈本来打算七篇放一起的太懒了。算了。要就去看吧
1、首先通过vue-cli生成一个名字叫做demo的项目
vue init webpack demo- 1
2、项目搭建完成以后，安装vuex
npm install vuex --save- 1
3、在src目录下创建vuex文件夹，然后在该文件夹下创建一个名字叫做store的js文件 
4、在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
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
5、在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/>'
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
6、修改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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
7、到现在为你，初始的票数已经被咱们获取到了。
不过有心的你应该已经发现了：当获得vuex状态值的时候代码好长，好啰嗦，好不方便！不过没关系，vuex为伟大的你提供了一种十分简便方法。
- 首先在App.vue当中的script内引入vuex
import vuex from "vuex";- 1
- 然后在computed计算属性里写如下代码：
computed:vuex.mapState(["vueVoteCount","nodeVoteCount"])
或
computed:vuex.mapState({//mapState方法最终返回的是一个state对象。
vueVoteCount:state=>state.vueVoteCount,
nodeVoteCount:(state)=>state.nodeVoteCount
})- 1
- 2
- 3
- 4
- 5
- 6
- 再然后修改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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
经过上面的代码调整以后，你会发现调取vuex的状态值简便了不少。
不过设置mapState也要花费一些精力。
那么咱们再通过ES6的知识再将上面的JS部分进行一番优化。
- 首先咱们将引入的vuex那部分修改为：
import {mapState} from "vuex";//通过ES6的对象解构赋值- 1
- 然后在使用mapSate的时候，咱们就可以省略一级对象（vuex）,即computed修改为：
computed:mapState(["vueVoteCount","nodeVoteCount"])
或
computed:mapState({
vueVoteCount:state=>state.vueVoteCount,
nodeVoteCount:(state)=>state.nodeVoteCount
})- 1
- 2
- 3
- 4
- 5
- 6
- 现在有的小伙伴是不是在想，以后如果我要在这里写自己的计算属性怎么办？怎么办？咱们可以通过对象合并的方法去实现。
通过Object.assign()合并对象：
//Object.assign()方法的第一个参数为目标对象，其余参数为源对象。
//通过该方法可以将所有源对象的值copy到目标对象。
//该方法的返回值即为这个目标对象
computed:Object.assign(mapState(["vueVoteCount","nodeVoteCount"]),{
//自己的计算属性可以在这里面写哦
}),
//或
computed:Object.assign(mapState({
vueVoteCount:state=>state.vueVoteCount,
nodeVoteCount:(state)=>state.nodeVoteCount
}),{
//自己的计算属性可以在这里面写哦
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
当然也可以用…(扩展运算符）来合并对象
computed:{
...mapState(["vueVoteCount","nodeVoteCount"]),
...{
//自己的计算属性可以在这里面写哦
}
}
//或
computed:{
...mapState({
vueVoteCount:state=>state.vueVoteCount,
nodeVoteCount:(state)=>state.nodeVoteCount
}),
...{
//自己的计算属性可以在这里面写哦
}
}