一. 在src/store/index.js新建一个js文件
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
// vuex 中的五大管理状态:state mutations actions getters modules
export default new Vuex.Store({
// 1.保存状态 类似 页面中的data
state: {
counter: 0,
},
mutations: {},
actions: {},
getters: {},
modules: {},
});
二.在main.js中引入 这个文件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
实际截图:
image.png
三.业务需求: 在VueX中的state新加一个参数 counter:0 在全局任何组件都能获取到他:
(1)实际截图:
image.png
(2) 在其他页面获取的方式:
image.png
官方提供的VueX流程更改图:
image.png
----------------- 以上的那种取值是不推荐的做法 --------------------
----------------- 下面这些就是vue推荐的做法 -----------------------
一.正确的获取方式首先在store/index.js 文件中定义:
state的使用:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
// vuex 中的五大管理状态:state mutations actions getters modules
export default new Vuex.Store({
// 1.保存状态 类似 页面中的data
state: {
counter: 0,
},
mutations: {
increment(state) {
state.counter++;
},
decrement(state) {
state.counter++;
},
},
actions: {},
getters: {},
modules: {},
});
2. 在全局页面获取的方式
<template>
<div id="app">
<h1>----App组件的内容---</h1>
<!-- 获取VueX中的counter -->
<h2>{{ $store.state.counter }}</h2>
<button @click="addition">+1</button>
<button @click="subtration">-1</button>
<hr />
<h1>---------hello-vuex的内容-------------</h1>
<hello-vuex />
</div>
</template>
<script>
import HelloVuex from "./components/HelloVuex.vue";
export default {
name: "App",
data() {
return {
message: "我是App组件",
};
},
components: {
HelloVuex,
},
methods: {
addition() {
//
},
subtration() {},
},
};
</script>
<style lang="less">
.active {
color: red;
}
</style>
实际截图:
image.png
二.getters的基本使用(它的功能类似于 computed计算属性的作用):
实际截图:
image.png
二.一 getters 案例演示如下: 需求:获取年纪大于20岁以上的
第一种方案使用computed:实际截图:
image.png
第二种方案使用getters实际截图:
image.png
二.三 在getters中定义的方法中可以传入state 也可以传入getters本身的例如:
image.png
二.四 动态传值给getters中的方法:
image.png
三.mutations 的基本使用(Vuex中状态更新唯一的方式就是提交mutations)
三.一 Mutations 主要是包括两部分:
image.png
三.二需求 当点击按钮的时候 需要传递的是动态的数据:
image.png
三.三 需求当点击按钮的时候动态的添加一个对象(说白点,我想表达的就是,可以传递第二个参数)
image.png
三.四 mutations的提交风格:(上面的都是普通的提交风格):
image.png
三.五 mutations的响应规则:
image.png
上面的截图的意思就是你当前的数组或者是对象初始化的时候就已经有定义好的属性 或者是方法等等....那样你才能添加进去 才能做到响应式
Vue.set(当前对象,要设置的属性,要设置的值);
Vue.set(dataInfo, "adress", "湖北省安陆市"); // 用这个是可以做到响应式的
Vue.delete(当前对象,要删除的对象属性);
Vue.delete(dataInfo, "adress") // // 用这个是可以做到响应式的
三.六 mutations 的类型常量
这个的主要场景用法就是解决你在多个地方使用同一个事件的时候 怕你把事件名称写错了
解决方案:
1. 在store文件中新建一个 mutations-types.js 文件,把你对应的常量写在这个里面
export const INCREMENTCOUNT = 'incrementCount';
export const ADDSTUDENT = 'addStudent';
2. 你哪个页面需要使用什么常量的话 就直接引入mutations-types.js中的什么常量
App.js 需要使用
<template>
<div id="app">
// 使用常量
<!-- 需求:每次点击按钮 添加一个学生信息进来 -->
<button @click="addStudent">添加学生</button>
</div>
</template>
<script>
import {INCREMENTCOUNT} from "./store/mutations-types"
export default {
name: "App",
methods: {
addCount(count) {
// 3.使用常量
this.$store.commit(INCREMENTCOUNT, count);
}
},
};
</script>
<style lang="less">
.active {
color: red;
}
</style>
store/index.js 需要使用
import Vue from "vue";
import Vuex from "vuex";
import {INCREMENTCOUNT} from "./store/mutations-types"
Vue.use(Vuex);
// vuex 中的五大管理状态:state mutations actions getters modules
export default new Vuex.Store({
state: {
students: [
{ id: 110, name: "huzhenchu", age: 18 },
{ id: 111, name: "chuchuhu", age: 28 },
{ id: 112, name: "guxiaohu", age: 24 },
{ id: 113, name: "zhenchuhu", age: 6 },
]
},
mutations: {
//修改信息
updataInfo(state) {
state.info.name = "chuchuhu";
},
// 1.这个是mutations的普通提交风格
INCREMENTCOUNT(state, count) {
state.counter += count;
},
}
});
四.actions的基本使用
在mutations中去做异步的操作的话 Vue的devtools 工具监听不到异步更新的的数据的,所以actions的出现成功的解决了异步数据在加载的时候 Vue devtools 监听不到的问题
实际截图
image.png
image.png
import Vue from "vue";
import Vuex from "vuex";
// import {INCREMENTCOUNT} from "./store/mutations-types"
Vue.use(Vuex);
// vuex 中的五大管理状态:state mutations actions getters modules
export default new Vuex.Store({
state: {
counter: 1,
students: [
{ id: 110, name: "huzhenchu", age: 18 },
{ id: 111, name: "chuchuhu", age: 28 },
{ id: 112, name: "guxiaohu", age: 24 },
{ id: 113, name: "zhenchuhu", age: 6 },
],
info: {
name: "Kobe",
age: 40,
height: 1.98,
},
},
mutations: {
//修改信息
updataInfo(state) {
state.info.name = "chuchuhu";
}
},
// 这个是专门做异步操作的
actions: {
// context上下文
aUpdatInfo (context) {
setTimeout(()=> {
context.commit('updataInfo')
},1000)
}
},
modules: {},
});
如果页面调用的话实际截图
image.png
网友评论