初识Vuex
Vuex方便了无关联组件之间的传值,个人建议先去观看一下官网文档,了解其生态系统,下面就很好上手了。
下面注意官网上的这个生态系统图,会与下面例子一一对应
注意框红的这三个点,组件(Vue Components)想要共享某数据就要调用Dispatch方法来引用Actions,如上图所示。
大家看着有大概印象就行,下面直接上例子(从配置到例子)
步骤1(省略vue-cli的搭建过程):
安装命令:
npm install vuex --save
步骤2:
在vue脚手架的src文件夹内创建一个文件夹,里面再创建一个文件
文件夹名字和文件名你们随意,但文件就别创建错类型了,是js文件
步骤3:
在刚创建的js文件中写入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//state就如生态系统中的图示,是数据共享,有点类似于data,是直接render数据到页面的,也是生态图中
的最后一步
state: {
key: 'value'
},
//actions如生态图所示,是组件components才能对其进行操作,通过commit方法对mutations进行任务提交
actions: {
changeCity (ctx, 组件传过来的参数) {
ctx.commit('mutations对应的方法名', 组件传过来的参数)
}
},
//mutations如生态图所示,只有mutations才能修改state内的数据!这很重要
mutations: {
mutations对应的方法名 (state, actions传过来的参数) {
//在这里就可以使用actions传过来的参数赋值给state的参数进行数据渲染了
state.的key = actions传过来的参数
}
}
})
第二种写法(与上面的效果相同,但更推荐这种)
<script>
//这里导入类似与映射引用
import { mapState, mapMutations } from 'vuex'
export default {
name: 'CityList',
props: {
hot: Array,
cities: Object,
letter: String
},
//必须在computed计算属性中引用
computed: {
...mapState({
//这里完成对state的映射,意思就是自定义的currentCity与 state中的city属性进行映射匹配,这个组件就可以直接使用this.currentCity进行操作了
currentCity: 'city'
})
},
methods: {
handleCityClick (city) {
this.changeCity(city)
this.$router.push('/')
},
//同理这个也是对Mutations进行映射,可以是数组也可以是对象,这里用数组的方式,意思是对Mutations下的changeCity方法进行映射匹配,这个组件直接用this.changeCity()即可
...mapMutations(['changeCity'])
},
mounted () {
//忽视这个,这个不重要
this.scroll = new Bscroll(this.$refs.wrapper)
}
}
</script>
步骤4:
main.js导入
import store(你自定义的组件名) from '你刚新建的文件夹名即可(放置步骤3文件的文件夹)'
在下面的Vue实例中添加:
直接写store是一种简写方法,如不理解可以写成
new Vue({
el: '#app',
router: router,
store: store(你刚引入的js文件),
components: { App },
template: '<App/>'
})
步骤5:
组件可以开始调用了,配置差不多了
若要修改共享值,在方法(methods)内直接这样调用
this.$store.dispatch('actions内对应的方法名', 更改后的值)
若要显示在页面,或者给vue组件内引用
//state对应的key名
this.$store.state.对应的key名
还有一种更规范的引用方法
在需要引用的组件内导入
import { mapState } from 'vuex'
export default {
name: '组件名',
computed: {
...mapState(['对应state的key'])
}
}
这样就可以直接在组件内用this.key名直接调用,如...maoState(['num']),那么调用就直接是this.num