在用脚手架搭建的过程中,可以直接进行安装
同时,我们也可以手动进行安装 npm install vuex
在安装完成之后,在 src目录下创建store文件夹,并创建index.js文件
//引入createStore函数
import { createStore } from "vuex";
//创建store对象
const store = createStore({
//会直接把对象返回出去
state: () => ({
counter: 100,
}),
//等同于以下写法
// state() {
// return { counter: 100 };
// },
});
export default store;
import { createApp } from "vue";
import App from "./App.vue";
//引入store对象
import store from "./store";
const app = createApp(App);
//使用store对象
app.use(store);
app.mount("#app");
<div>
{{$store.state.counter}}
div>
computed:{
counterStore(){
return this.$store.state.counter
}
}
const counter = store.state.counter
import { computed, toRef } from "vue";
import { useStore } from "vuex";
const store = useStore();
//可以用计算属性返回
const counter = computed(() => {
return store.state.counter;
});
//可以通过toRef转成响应式
const counterRef = toRef(store.state.counter);
目的是取状态更为方便一点,就像在组件内部定义变量一样使用
//比如现在store中存在以下属性
//name: "zhangcheng",
//age: "18",
//address: "hebei",
import { mapState } from "vuex";
computed: {
//传入数组参数
...mapState(["name", "age", "address"]),
//等同于以下写法
// name() {
// return this.$store.state.name
// }
//传入对象参数
...mapState({
sName: (state) => state.name,
}),
},
前面我们知道在vuex中有一个mapState函数,可以帮助我们完成映射
this.$store.state
import { useStore } from "vuex";
const store = useStore();
//通过store.state.name获取
//获取计算属性
import { computed } from "vue";
//获取mapState与useStore函数
import { mapState, useStore } from "vuex";
//获取返回值,此时的name是一个函数
const { name } = mapState(["name"]);
const store = useStore();
//在传入name的时候,通过bind改变this指向
//因为computed需要传入一个函数,而call和apply返回值都是函数本身的返回值
//而bind返回的是一个函数
const cName = computed(name.bind({ $store: store }));
import { toRefs } from "vue";
import { useStore } from "vuex";
const store = useStore();
//解构的时候对变量重命名
//注意使用toRefs
const { name: cName, age } = toRefs(store.state);
类似于computed计算属性,对state中的数据可以进行复杂逻辑的处理
//引入createStore函数
import { createStore } from "vuex";
//创建store对象
const store = createStore({
//会直接把对象返回出去
state: () => ({
name: "zhangcheng",
age: "18",
address: "hebei",
}),
getters: {
//第一个参数用于接收state中的变量
nameAge(state) {
return state.name + state.age; //"zhangcheng18"
},
//第二个参数,用于接收getters中的变量
info(state, getters) {
return getters.nameAge + state.address; //"zhangcheng18hebei"
},
//可以返回一个函数,用于接收变量
returnInfo(state) {
return function (name) {
return `${name} is ${state.name} friend`;
};
},
},
});
<div>nameAge{{ $store.getters.nameAge }}div>
<div>info{{ $store.getters.info }}div>
<div>returnInfo{{ $store.getters.returnInfo("lisi") }}div>
nameAgezhangcheng18
infozhangcheng18hebei
returnInfolisi is zhangcheng friend
是Vuex中修改State的唯一途径
在mutation中写的都是同步代码,不能写异步代码,比如进行网络请求
//创建store对象
const store = createStore({
//会直接把对象返回出去
state: () => ({
name: "zhangcheng",
age: "18",
address: "hebei",
}),
mutations: {
changeName(state,payload) {
state.name = payload;
},
},
});
methods:{
change(){
this.$store.commit("changeName","lisi")
}
}
import {useStore} from "vuex"
const store = useStore()
const changeInfo = store.commit("changeInfo")
Action类似于mutation,但是不同的地方在于
在创建store实例的时候
mutations: {
changeName(state, payload) {
state.name = payload;
},
},
actions: {
changeNameAction(context, payload) {
//第一个参数相当于store实例,但实际上不是
//第二个参数是通过dispatch调用方法,传入的参数
context.commit("changeName", payload);
},
},
change() {
this.$store.dispatch("changeNameAction", "lisi");
},
//创建store对象
const store = createStore({
//会直接把对象返回出去
state: () => ({
list: [],
}),
mutations: {
//修改state
changeName(state, payload) {
state.list = payload;
},
},
actions: {
//进行网络请求,并且提交commit申请
changeNameAction(context, payload) {
fetch(xxxxx)
.then((res) => {
return res.json();
})
.then((res) => {
context.commit("changeName", res);
});
},
},
});
actions:{
changeName(){
return new Promise((resolve)=>{
resolve(123)
})
}
}
//实际调用的时候
this.$store.dispatch("changeName").then((res)=>{
console.log(res)
})
在使用Vuex进行状态管理的时候,难免维护的状态会十分庞大
因此我们可以使用 modules将store分割成模块
每个模块都拥有自己的state、mutation、action、getter,甚至可以嵌套子模块
创建一个模块
export default{
state:()=>({}),
getters:{},
mutations:{},
actions:{}
}
import homeModule from "../home.js"
import { createStore } from "vuex";
const store = createStore({
modules:{
//引入模块的名字:实际引入的模块
home:homeModule
}
})
//在实际使用中,mutation以及action、getters 可以直接读取
//而读取state中的数据有所变化
store.state.home.name
上面我们知道可以进行分模块的操作
那么我们想在模块中,访问根模块的内容需要怎么访问
比如在 home模块中
getters:{
changeCounter(state,getters,rootState){
//state是本模块中的状态
//getters是本模块中的getters
//rootState是根模块的state
}
}
//同理mutation和actions