vuex_0">安装依赖 npm install --save vuex
- 每一个 Vuex 项目的核心就是 store（仓库）。 store 就是一个对象，它包含着你的项目中大部分的状态
(state)。 - state 是 store 对象中的一个选项，是 Vuex 管理的状态对象（共享的数据属性）
建立vuex文件
vuex 它虽然在切换路由的时候可以获取到状态值， 但是如果刷新了就没有了
可以结合 loacl storage 或 session使用
（seesion 关闭浏览器清空）
loacl storage 除非主动清空 不然不会失效
注册
使用全局 和 通过点击更改全局
提交载荷
Action
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是在组件中直接变更状态， 通过它间接更新 state。
在组件中通过 this.$store.dispatch(‘actionName’) 触发状态值间接改变
Action 也支持载荷
Action 可以包含任意异步操作。
不建议直接更改mutation 最好在action中写逻辑之后再mutation改变
相当于是逻辑层
// 调用方法
派生属性 getter
有时候我们需要从 store 中的 state 中派生出一些状态。
例如：基于上面代码，增加一个 desc 属性，当 count 值小于 50，则 desc 值为 吃饭 ; 大于等于 50 小于
100，则desc 值为 睡觉 ; 大于100 , 则 desc 值为 打豆豆 。这时我们就需要用到 getter 为我们解决。
getter 其实就类似于计算属性(get)的对象.
组件中读取 $store.getters.xxx
//获取
以module模块化项目结构 （便于管理）可以把home抽取出来文件 下面会展示
import Vue from "vue";
import Vuex from "vuex";
// //引入vuex插件
Vue.use(Vuex);
// 以module模块化项目结构
// 可以把home抽取出来文件
const home = {
//定义全局变量
state:{
count:0
},
// 函数
mutations:{
//定义更改全局变量函数
// 载荷参数 n
increCount(state, n){
// state.count++
state.count += n
},
subtractCount(state){
state.count--
}
},
// Action 类似于 mutation，不同在于：
// Action 提交的是 mutation，而不是在组件中直接变更状态， 通过它间接更新 state。
// 在组件中通过 this.$store.dispatch('actionName') 触发状态值间接改变
// Action 也支持载荷
// Action 可以包含任意异步操作。
// 不建议直接更改mutation 最好在action中写逻辑之后再mutation改变
actions:{
// context 上下文 n 为载荷参数 increCount 调用mutations 里面的函数
add(context, n){
context.commit('increCount', n);
},
//按需导入 commit 提交函数 state全局变量
decrement({commit, state}){
console.log('全局参数', state.count)
commit('subtractCount')
}
},
//派生属性
getters:{
//会获取到上面的state
remark(state){
if(state.count < 50){
return "吃饭";
}else if(state.count < 100){
return "睡觉";
}else{
return "打豆豆";
}
}
}
}
const goods = {
state:{},
mutations:{},
actions:{},
getters:{}
}
const store = new Vuex.Store({ // 注意V和S都是大写
modules:{
home,
goods
}
});
export default store
<template>
<div class="home">
<!-- 调取全局变量 -->
<!-- count : {{$store.state.count}} -->
<!-- 以module模块化项目结构 （便于管理） 只需要更改获取参数state的这 别的不需要更改 -->
count : {{$store.state.home.count}}
<button @click="addCount">增加值</button>
<button @click="decCount">减少</button>
<h1>{{$store.getters.remark}}</h1>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "home",
components: {
HelloWorld
},
methods:{
addCount(){
//通过commotion 调用 mutations 中的 increment 改变状态值
//多个参数, 叫提交载荷
// this.$store.commit('increCount', 10);
// 触发 actions 中的 add 改变状态值
this.$store.dispatch('add', 10);
},
decCount(){
// this.$store.commit('subtractCount');
this.$store.dispatch('decrement');
}
}
};
</script>
标准项目结构 – 抽取文件标准化
跟级别的是公共的
home.js
const state = {
count:0
}
//派生属性
const getters = {
//会获取到上面的state
remark(state){
if(state.count < 50){
return "吃饭";
}else if(state.count < 100){
return "睡觉";
}else{
return "打豆豆";
}
}
}
const mutations = {
//定义更改全局变量函数
// 载荷参数 n
increCount(state, n){
// state.count++
state.count += n
},
subtractCount(state){
state.count--
}
}
// Action 类似于 mutation，不同在于：
// Action 提交的是 mutation，而不是在组件中直接变更状态， 通过它间接更新 state。
// 在组件中通过 this.$store.dispatch('actionName') 触发状态值间接改变
// Action 也支持载荷
// Action 可以包含任意异步操作。
// 不建议直接更改mutation 最好在action中写逻辑之后再mutation改变
const actions = {
// context 上下文 n 为载荷参数 increCount 调用mutations 里面的函数
add(context, n){
context.commit('increCount', n);
},
//按需导入 commit 提交函数 state全局变量
decrement({commit, state}){
console.log('全局参数', state.count)
commit('subtractCount')
}
}
export default {
state,
getters,
mutations,
actions
}
index.js
import Vue from "vue";
import Vuex from "vuex";
import home from "./modules/home.js"
import goods from "./modules/goods.js"
// //引入vuex插件
Vue.use(Vuex);
// 以module模块化项目结构
const store = new Vuex.Store({ // 注意V和S都是大写
modules:{
home,
goods
}
});
export default store
