01-day-vuex的使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
知识点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) //在控制台输出 “动态修正值，我不是哈哈”  可能在编译器会报错
复制代码
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---------------------------------------------------
知识点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
   
  }
复制代码
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
知识点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未看  

　　

posted @   南风晚来晚相识  阅读(153)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示
❉
❉
❉