知识点1===》简单的使用vuex 进行state取值
使用yarn下载 yarn add vuex -D
vuex的包叫做 store 跟pages同级
创建store文件夹，文件夹下有store.js
store.js文件如下
{
// Vuex 仓库文件(入口)
import Vue from 'vue'
import Vuex from 'vuex'
//全局注册
Vue.use(Vuex)
// 创建一个状态厂库 并且将它暴露出去 export default
const store=new Vuex.Store({
state: {
test: "ceshi",
},
})
console.log(store.state.test) //在控制台输出 ceshi 可能在编译器会报错
export default store
}
然后在main.js引入改文件store.js
import store from "./store/store";
最后注释掉 目的在控制台好单独观察
render: h => h(App)
即如下
new Vue({
router,
}).$mount("#app");
----------------------------------------------
知识点2==》简单的使用vuex 对state进行修改值
使用mutations store.commit("changeName"); 进行提交
{
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
// 创建一个状态厂库 并且将它暴露出去 export default
const store=new Vuex.Store({
state: {
test: "ceshi",
},
// 通过mutation去改变state中的值,它是改变state值（状态的)的唯一方式 mutation是同步的
mutations: {
changeName(state) {
state.test = "哈哈 我不是test"
}
}
})
// 放肆一 通过 store.commit()的方式去提交mutation,
store.commit("changeName");
console.log(store.state.test) //在控制台输出 “哈哈 我不是test” 可能在编译器会报错
export default store
}
-------------------------------------------------
知识点3==》简单的使用vuex 对state进行动态修改值 知识点2其他的不变
改变mutations 语句块 和 store.commit
// 再传递一个参数，用来动态修改值 zhi
mutations: {
changeName(state,zhi) {
state.test = zhi
}
}
// 放肆一 通过 store.commit()的方式去提交mutation,
store.commit("changeName","动态修正值，我不是哈哈");
console.log(store.state.test) //在控制台输出 “动态修正值，我不是哈哈” 可能在编译器会报错
---------------------------------------------------
知识点4==》 如果 store.commit()传递的参数不止2个 那怎么办 知识点2其他的不变
改变mutations 语句块 和 store.commit
第2个参数使用对象的形式
mutations: {
changeName(state,obj) {
state.test = obj.x
}
}
// 第二个参数使用一个对象那个的形式代替
store.commit("changeName",{v:"我是vvvvvvvvv", x:"我是xxxxxxxxx"});
console.log(store.state.test) //在控制台输出 “我是xxxxxxxxx” 可能在编译器会报错
----------------------------------------------------
知识点5===》 提交mutations store.commit()的另外一种方式
store.commit整个帝乡传递给第二个参数 obj
mutations: {
changeName(state,obj) {
state.test = obj.val
}
}
store.commit({
type: "changeName", //这里是mutation的名字
val: 10,
sex: "男",
newName: "王五"
});
console.log(store.state.test) //输出10
----------------------------------------
知识点6==》 action的基本使用 store.dispatch去调用 action
{
// Vuex 仓库文件(入口)
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
// 创建一个状态厂库 并且将它暴露出去 export default
const store=new Vuex.Store({
state: {
test: "ceshi",
datalist:[], //add
},
mutations: {
changeName(state,obj) {
state.test = obj.val
}
},
// 每一个action都会接收一个参数，这个参数可以提交mutation( context.commit( ) )
actions:{
initDatalist(context,obj){
console.log(context); //输出为 {dispatch: ƒ, commit: ƒ, getters: {…}, state: {…}}
console.log(obj); // 我是哈哈
}
}
})
store.commit({
type: "changeName", //这里是mutation的名字
val: 10,
sex: "男",
newName: "王五"
});
// 调用action，使用store.dispatch就可以出发一个action 同样调用有两种形式
// 1 第二个参数数对象 2整个都是对象的形式
store.dispatch({
type:"initDatalist",
val:"我是哈哈"
})
export default store
}
千万不能 虽然在控制台可以看见state中有值
但是我们不能直接通过这样的形式去修改 .state.属性=“值”
之所以我们能够看见 是因为别人是为了我们可以看见 方便调试
------------------------------------------
知识点7==》
action 模块与 mutations模块中 函数不用担心会覆盖 不用担心函数会重名
导入api
import {getGoodsInfo} from "../apis/api"
{
// Vuex 仓库文件(入口) import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
import {getGoodsInfo} from "../apis/api"
// 创建一个状态厂库 并且将它暴露出去 export default
const store=new Vuex.Store({
state: {
test: "ceshi",
datalist:[],
},
mutations: {
initDatalist(state, obj) {
state.datalist = obj.list;//赋值哦
}
},
//每一个action都会接收一个参数，这个参数可以提交mutation( context.commit( ) )
actions:{
async initDatalist(context,obj){
// 发送一步请求 拿到数据
let res= await getGoodsInfo()
console.log(res.data.data)
context.commit({
type: "initDatalist", //去调用mutations中的initDatalist
list: res.data.data
})
}
}
})
// 调用action，使用store.dispatch就可以出发一个action 同样调用有两种形式
// 1 第二个参数数对象 2整个都是对象的形式
store.dispatch({
type:"initDatalist",
val:"我是哈哈"
})
console.log(store.state.datalist)
//我我们发现这里并没有输出几个数组的值
// 因为是axios 是一步需求 此时还没有它去取值时 请求还没有拿到值
// action: 通知，可以进行任何异步操作，action不能直接改变state，只能提交一个mutation让它去改变状态
// 如果有异步请求获取数据，应该先发送action，在action内处理完异步，并拿到数据以后，在commit一个mutation
export default store
}
知识点8===》
getter： 计算属性（同computed），会进行结果缓存，只要母体数据不发生变化，则不会重新计算！
getter：的基本用法 跟另外几个属性同级
getters:{
getMale(){
return "getters必须返回一个值"
}
}
//取值，和computed一样，直接调用属性即可，不用加括号！！！！
console.log(store.getters.getMale) //输出getters必须返回一个值
知识点9===》getters过滤值 过滤掉女生
{
// Vuex 仓库文件(入口)
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
// 创建一个状态厂库 并且将它暴露出去 export default
const store=new Vuex.Store({
state: {
test: "ceshi",
datalist:[],
emplist: [
{ name: "zs", sex: "男" },
{ name: "zs1", sex: "男" },
{ name: "zs2", sex: "女" },
{ name: "zs3", sex: "女" },
{ name: "zs4", sex: "男" }
] //add
},
mutations: {
initDatalist(state, obj) {
state.datalist = obj.list;//赋值哦
}
},
getters:{
getMale(state){ //是上面各个state
let arr=[];
for(let obj of state.emplist){
if(obj.sex=="男"){
arr.push(obj);
}
}
return arr; // getters 必须返回一个值
}
}
})
//取值，和computed一样，直接调用属性即可，不用加括号！！！！
console.log(store.getters.getMale) // 放回过滤后的值
export default store
}
知识点10==》
filter的使用 与vuex无关
如果retuen true 则把当前的值放入新数组
如果retuen false 则不会把 当前的值放入新数组
let arr=[1,2,3,4,5,6,7,8];
let newarr=arr.filter(val=>{
if(val%2==0){
return true
}else{
return false
}
})
console.log(newarr) //输出【2,4,6,8】
09-核心概念，module未看