主要操作技能:
一、Vuex 解决不同组件数据共享,数据持久化。
1.安装 cnpm install vuex --save
2.在src下创建vuex文件夹,在创建文件store.js
3.在store.js文件中引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
4.定义数据 state
/*1.state在vuex中用于存储数据*/
var state={
count:1
}
5、定义方法 mutations
// mutations里面放的是方法,方法主要用于改变state里面的数据
var mutations={
incCount(){
++state.count;
}
}
6、有点类似于计算属性 getters,改变state里面的count的数据会触发getter的方法,获取新的值;(基本用不到)
var getters={
computedCount:(state)=>{ //state作为其第一个参数
return state.count*3;
}
}
7、基本也没用 actions
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
var actions={
incMutationsCount (context) { //因此你可以调用context.commit提交一个mutation
context.commit('incCount') //执行mutations中的incCount方法
}
}
8、暴露Vuex
const store = new Vuex.Store({
state,
mutations,
getters,
actions
})
export default store;
二、组建里面使用vuex:
1.在Home.vue组件中导入
import store from '../vuex/store.js'
2.在Home.vue组件中注册
export default {
data() {
return {
title: '新闻组件!',
list: []
}
},
store
}
3、获取state里面的数据
this.$store.state.数据
4、触发 mutations 改变 state里面的数据
this.$store.commit('incCount');
5、触发 actions里面的方法
this.$store.dispatch('incMutationsCount');
6、 获取 getters里面方法返回的的数据 {{this.$store.getters.computedCount}}
编写代码:
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/*1.state在vuex中用于存储数据*/
var state={
count:1
}
//2.mutations里面放的是方法,方法主要用于改变state里面的数据
var mutations={
incCount(){
++state.count;
}
}
//3.有点类似于计算属性,改变state里面的count的数据会触发getter的方法,获取新的值;(基本用不到)
var getters={
computedCount:(state)=>{ //state作为其第一个参数
return state.count*3;
}
}
//4.基本也没有
//Action 类似于 mutation,不同在于:
//Action 提交的是 mutation,而不是直接变更状态。
//Action 可以包含任意异步操作。
var actions={
incMutationsCount (context) { //因此你可以调用context.commit提交一个mutation
context.commit('incCount') //执行mutations中的incCount方法
}
}
//实例化 Vuex.store,注意暴露
const store = new Vuex.Store({
state,
mutations,
getters,
actions
})
//导出
export default store
Home.vue
<h2>{{title}} {{this.$store.state.count}}
-->{{this.$store.getters.computedCount}}</h2><br />
<button @click="changCount">改变数据+</button><br /><br />
<script>
//导入
import store from '../vuex/store.js'
export default {
data() {
return {
}
},
store, //注册
methods: {
changCount(){ //incCount是mutation中的方法
// this.$store.commit('incCount') //触发state里面的数据
// 分发 Action
this.$store.dispatch('incMutationsCount') //触发action里面的方法
}
}
</script>
效果:
1)默认数据
2)单击按钮发生,数据发生变化
3)同时,新闻页面数据也发生同等变化
4)单击按钮,数据发生变化到4
5)同样,首页数据也发生相应的变化,达到了数据共享!