【vue（二）Vuex】

一、vuex使用步骤

1.安装

//vue2安装vuex3 
//vue3安装@vuex4
npm i vuex@3

2.创建store文件

• 可以建立小仓库，最后在index.js中引入并导出
• 在这里Vue.use(Vuex)，main.js中的所有import语句都会提升到最开始执行。所以不能再main.js中引入vuex，否则会报错

//该文件用于创建Vuex中最为核心的store//引入Vue
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';//引入插件并使用插件
Vue.use(Vuex); //使用插件后就可以在vm,vc里使用store配置项//准备actions,用于响应组件中的动作
const actions = {};//准备mutations,用于操作数据(state)
const mutations = {};//准备state,用于存储数据
const state = {};//创建store
const store = new Vuex.Store({actions: actions,mutations, //简写state //简写
});//导出store
export default store;

3.main.js中引入

//js文件里所有的import语句都会提升到最开始执行
// 引入Vue
import Vue from 'vue';
// 引入App
import App from './App.vue';
Vue.config.productionTip = false;//引入store
import store from './store/index.js';// 创建一个Vue实例
new Vue({render: (h) => h(App),store,
}).$mount("#app");

• 创建组件实例的时候，Vue 会把 store 实例自动注入到整个组件树的所有子组件中
• 意味着vm（Vue 实例）和所有 vc（Vue Components）都能通过 this.$store 访问到同一个全局唯一的 store 实例

二、Vuex原理

1.原理

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
• 每一个 Vuex 应用的核心就是 store（仓库）

• vc(组件）：顾客
• actions：服务员
• mutations：厨师
• state：菜的原料
• vc来到店里，dispatch给actions要吃什么菜，然后actions把菜单commit给mutations，然后mutations把state进行mutate加工，最后render给vc

2.求和案例

1.先把求和数据给state

const state = {sum: 0,  //初始化数据
};

2.插值语法的使用

<h1>当前求和为：{{  $store.state.sum  }}</h1>

3.组件回调dispatch
（1）如果没有业务逻辑，就直接commit给mutations:例如只修改state里面的数据
（2）如果有业务逻辑，就得先dispatch给actions：例如要进行异步请求调用API

add() {this.$store.dispatch('jia', this.addnum);//如果没有业务逻辑，直接commit可以跳过actions直接给mutations//this.$store.commit('JIA', this.addnum);},

4.actions中使用jia函数，commit给mutations

• context对一个对象，不是store本身，但是包含了store的一些关键方法和属性
• 使用时可以进行解构

jia(context, value) {//第一个参数是浓缩版的$store，方便你在这里调用commit把东西给mutations//第二个参数是传过来的数据context.commit('JIA', value); },

5.在mutations使用JIA函数

JIA(state, value) {//第一个参数是state对象，第二个参数是传过来的数据console.log('mutations中的JIA被调用了 ', state, value);state.sum += value;
},

6.在getters里面可以简化数据
否则就得在组件中使用计算属性获取数据

（1）直接在组件获取收据

computed: {count() {return this.$store.state.count; // 直接从 store 中获取 count 状态}},

（2）使用vuex的辅助函数mapstate

import { mapState } from 'vuex';computed: {...mapState({count: state => state.count, // 映射 store.state.count 到局部计算属性 count}),// 或者更简单的方式：...mapState(['count'])// 如果store的状态名（count)和计算属性名(count)相同},

（3）在getters里面处理数据，然后在组件访问

const getters = {goodsList(state){//state.searchList.goodsList如果服务器数据回来了，没问题是一个数组//假如网络不给力|没有网state.searchList.goodsList应该返回的是undefined//计算新的属性的属性值至少给人家来一个数组return state.searchList.goodsList||[];}
}

import { mapGetters } from "vuex";computed: {//mapGetters里面的写法：传递的数组，因为getters计算是没有划分模块【home,search】...mapGetters(["goodsList"]),},

三、Vuex存储数据的特点

• 存储在内存中，用于组件间的传值
• 响应式：组件读取store状态，store中的状态改变，相应的Vue组件也会自动更新
• 严格模式：严格模式下只能在mutations里面更改state,不能用actions
  • 在构造器中strict:true开启
• 不永久性：刷新页面时vuex存储的值会丢失

四、mutations里面不能发请求

• mutations必须是同步的：
  • 如果 mutation 支持异步操作，就没有办法知道状态是何时更新的，无法很好地进行状态的追踪，给调试带来困难

五、模块化开发和命名空间的开启

• 如果state，actions等是服务于多个种类的，比如有管home,search等的，这样放到一起很乱，所以可以把它们拆开
  

//引入Vuex -----相当于咱们最大的仓库
import Vuex from "vuex";
//引入Vue
import Vue from "vue";
//使用插件
Vue.use(Vuex);
//引入home|search模块的仓库
import home from "./home";
import search from "./search";
import detail from "./detail";
import shopcart from "./shopcart";
import user from "./user";
import trade from "./trade";
//需要暴露Vuex.Store类的实例(你需要暴露这个类的实例，如果你不对外暴露，外部是不能使用的)
export default new Vuex.Store({//模块：把小仓库进行合并变为大仓库modules: {home,search,detail,shopcart,user,trade,},
});

• 命名空间
• 避免名称冲突：最直接的作用就是避免不同模块中的 mutations、actions 和 getters 名称发生冲突。

const countAbout = {
namespaced:true,//开启命名空间
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {...}
}
}const personAbout = {
namespaced:true,//开启命名空间
state:{ ... },
mutations: { ... },
actions: { ... }
}const store = new Vuex.Store({
modules: {countAbout,personAbout
}
})

读取数据

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']), 
// 前边加个参数，意思是读取countAbout 里面的 sum,school.....