VUEX
问：啥是VUEX ？答： 是一个专门为VUE应用程序的状态管理模式库；
问：VUEX是干啥的？
答： 1. 不同组件之间数据的共享；2.组件里面数据的持久化；
问：VUEX的使用场景是什么？
答：举个例子就类似于 主页 和 新闻页无组件从属关系间的 数据传递；
问：VUEX怎么使用？
1. 安装 cnpm install vuex --save
2. 在 src 目录下，新建 vuex的文件夹，然后新建store.js 文件 ；
3. 在 store.js 中 引入，定义数据、定义方法，然后实例化，再然后抛出；
3.1 在state 中定义属性
3.2 在mutations中定义方法
3.3
4. 在需要通信的组件中使用，例如 主页和案例
4.1 先引入 import store from "./vuex/store.js"
4.2 在当前组件中注册
// 先引入后注册
import store from '../vuex/store.js'
export default {
data() {
return {
};
},
store,//就这样就算是注册 -。- 也不知道 谁 非得说这叫注册
methods: {
}
}; 4.3 直接调用state中的数据 {{ this.$store.state.count }} 4.4 利用commit 调用数据中的方法$this.$store.commit('incCount') ;
4.5 说到getter那就神奇又没啥卵用了， 这玩意就是数据改变时候触发的函数；
4.6 说到action 那就更神奇更没啥卵用了，据说特点是可以调用异步方法 ，在组件中 利用 dispatch调用
贴三个代码
vuex/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.getters 数据改变时触发 [类似计算属性] 传值不想写，没啥卵用
var getters = {
computedCount: (state) => {
return state.count*2;
}
}
// 4.action
var actions ={
incMutations(context){ // 方法名可以瞎写
context.commit('incCount'); //间接 执行 Mutations 的 方法incCount
}
}
// 实例化vuex
const store = new Vuex.Store({
state,
mutations,
getters,
actions
})
export default store;
试验品案例页面 Anli.vue
<template>
<div id="anli">
这是案例组件
<button @click="lmback()">点击触发返回上一步操作</button>
<h2>组件嵌套</h2>
<hr>
<ol>
<li> <router-link to="/anli/one"> 案例组件1</router-link></li>
<li> <router-link to="/anli/two"> 案例组件2</router-link></li>
<li> <router-link to="/anli/three"> 案例组件3 路由重定向的测试</router-link></li>
<li> <router-link :to="{ name: 'lmsix', params: { userId: 123 }}" > 案例组件6 路由命名的测试</router-link></li>
</ol>
<div class="lmbox">
<router-view></router-view>
</div>
<hr>
{{this.$store.state.count}}
<hr>
<button @click="abc()"> 点击改变数据 </button>
</div>
</template>
<script>
// 先引入后注册
import store from '../vuex/store.js'
export default {
data() {
return {
b: false,
};
},
store, //这步完成注册
methods: {
abc(){
this.$store.commit('incCount'); //commit 触发 mutations 内的方法
// this.$store.dispatch('incMutations'); dispatch触发 actions内的方法
}
},
mounted() {
//在组件加载的时候就接收
}
};
</script>
<style>
.lmbox{
margin:10px auto;
border:3px solid #eee;
width: 400px;
height: 200px;
}
</style>
页:
[1]