闲聊vue版本差异和开发中不太容易注意的点（基础篇）

<script>
export default {
  data() {
    return {
      msg: "helloCSDN",
    };
  },
  computed: {
    reverseMsg() {
      console.log("computed"); //执行了一次
      return this.msg.split("").reverse().join("");
    },
  },
  watch: {
    msg: {
      handler(n, o) {
        if (o) {
          this.msg = o.split("").reverse().join("");
        } else {
          this.msg = n.split("").reverse().join("");
        }
        console.log("watch"); //执行两次
      },
      immediate: true,
    },
  },
  methods: {
    reverseMsgFunc() {
      console.log("methods"); //执行三次
      return this.msg.split("").reverse().join("");
    },
  },
};
</script>

<template>
  <div>
    <!-- 实现一些基础的表达式，过于复杂的不太容易维护，不是不可以写，不建议写 -->
    <p>{{ msg.split("").reverse().join("") }}</p>
    <p>{{ msg.split("").reverse().join("") }}</p>
    <p>{{ msg.split("").reverse().join("") }}</p>
    <!-- 基于vue设计的计算属性中的缓存机制，只要原始值不发生改变，计算属性的内容是不会进行重新执行的 ，即使你进行改变了，后面也只是改变一次之后后两次直接获取缓存-->
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsg }}</p>
    <!-- 因为是方法，只要调用，就一定会执行，所以不涉及到缓存，但是不排除使用js的技术手段进行缓存的处理，进而实现计算属性一样的效果，但是代码成本就很高了 -->
    <p>{{ reverseMsgFunc() }}</p>
    <p>{{ reverseMsgFunc() }}</p>
    <p>{{ reverseMsgFunc() }}</p>
    <!-- 使用watch 会被执行两次，因为它是根据数据变化进行监听的，所以这种一般不会这么写，显的就比较的sb-->
    <p>{{ msg }}</p>
    <p>{{ msg }}</p>
    <p>{{ msg }}</p>
  </div>
</template>

<style scoped>
</style>

 reverseMsg: {
      get() {
        console.log("computed"); //执行了一次
        return this.msg.split("").reverse().join("");
      },
      //一般情况下我们是不需要进行写这个的，我们默认计算属性是一个只读的属性，但是非要有这种需求的时候，也不想通过方法进行实现的时候，这种也是可以进行更改值的
      set(nv) {
        console.log(nv); //你好,csdn
        //当然也可以进行重新赋值
        this.msg = nv;
      },
    },    

<template>
     <button @click="reverseMsg = '你好,csdn'">改变计算属性的值</button>
</template>

data() {
    return {
      isShow: true,
      isError: false,
    };
  },

    <p :class="{ active: isShow }">我是活跃的页面</p>
    <p :class="{ active: !isShow }">我是停止加载的页面</p>

<style scoped>
.active {
  font-size: 50px;
  color: blue;
}
.error {
  color: red;
}
</style>

computed:{
  styleObj() {
        return {
          active: this.isShow,
          error: !this.isShow,
        };
      },
}

    <p :class="styleObj">我是停止加载的页面</p>

 data() {
    return {
      user: {
        name: "jim",
        age: 18,
        sex: "男",
      },
    };
  },
watch: {
    user: {
      handler(n) {
        console.log(n);
      },
      deep: true,
    },
  },

 "user.name": {
      handler(n) {
        console.log(n); //你好，mary
      },
      deep: true,
    },

"user['name']": {
   handler(n) {
     console.log(n); //你好，mary
   },
   deep: true,
 },

 font-size :'40px'

 fontSize : '40px'
 

<template v-if="true">
   <h1 v-show="true">H1</h1>
</template>

arr: [
     {
       id: 0,
       name: "jim",
     },
     {
       id: 1,
       name: "kim",
     },
     {
       id: 2,
       name: "tom",
     },
   ],

<span v-for="it in arr" :key="it.id" v-if="it.id !== 2">{{ it.name }}</span>

<template v-for="it in arr" :key="it.id">
   <span v-if="it.id !== 0">{{it.name}}</span>
</template>

 user: {
     name: "jim",
     age: 18,
     sex: "男",
     [Symbol("secret")]: "456",
   },

<p v-for="(i, k) in user" :key="i">{{ i }} -- {{ k }}</p>
<!-- 这样很明显是获取不到symbol的值的 -->

computed:{
  getOwnKeys() {
      return Reflect.ownKeys(this.user);
    },
}
// 关于Reflect的用法和替代方案，我在之前的Proxy一篇文章中已经写过，这里就不做赘述了

<p v-for="(i, k) in getOwnKeys" :key="k">{{ user[i] }} - {{ k }}  - {{i}}</p>
 <!-- 因为这里是数组，所以这里的k一定是数组的下标，而不是对应的key 这里需要注意 -->

 

personList: ["jim", "tom", "kim"],

<ul>
   <li v-for="i in personList"><input type="checkbox" />{{ i }}</li>
</ul>
<button @click="addPerson">添加一个人</button>

addPerson() {
   this.personList.unshift("mary");
 },

 

 <li v-for="i in personList" :key="i"><input type="checkbox" />{{ i }}</li>
 

arr : [1,23,43,5]

changeArr(){
this.arr[5] = 7
}
//这个时候数据就会直接导致视图的更新

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

arrNum: [1, 2, 4, 5, 6, 7],
this.arrNum.splice(2, 0, 333); //从第二个位置开始插入 插入的内容为333，中间的0不可以少 //1，2，333，4，5，6，7
this.arrNum.splice(3) //从第三个位置开始删除，后面全部删除 //1，2，4
this.arrNum.splice(2, 4, 0, 4); //从第二个位置开始，替换4个 替换为0，4 // 1，2，0，4

 

 <button @click="optionArrNum">测试</button>

 optionArrNum(e){console.log(e)} //PointEvent

 <button @click="clickT($event), clickO($event)">自定义事件</button>

<input v-model="bindVal" />
<span>{{ bindVal }}</span>

<input :value="bindVal" />

 <input :value="bindVal" @input="changeVal" />

changeVal(e) {
   this.bindVal = e.target.value;
},

<template>
<div>
 {{ msg }}
 <button @click="changeMsg">改变组件的值</button>
</div>
</template>
<script>
export default {
name: "Content",
data() {
 return {
   msg: "我是一个组件",
 };
},
methods: {
 changeMsg() {
   this.msg = "hello-csdn";
 },
},
};
</script>

<script>
import Content from "./components/Content.vue";
export default {
components: {
 Content,
},
};
</script>

<template>
<div>
 <Content></Content>
 <Content></Content>
 <Content></Content>
</div>
</template>

<template>
<div>
 {{ msg }}
 <button @click="changeMsg">改变组件的值</button>
</div>
</template>
<script>
const obj = {
msg: "我是一个组件",
};
export default {
name: "Content",
data() {
 return obj;
},
methods: {
 changeMsg() {
   this.msg = "hello-csdn";
 },
},
};
</script>

//子组件
props: {
 message: {
   type: Array,
   default() {
     return [];
   },
 },
},

//父组件
data() {
 message: [1,2,3];
},
<Content :message="message"></Content>

mounted() {
 console.log(this.$parent.msg); //当我们获取msg的时候其实只有父组件一里面是存在的，二里面是不存在的，但是也会去拿，不过会获取到underfined
},

import Hello from "./Hello.vue";
components: {
    Hello,
  },
data() {
    return {
      msg: "我是一个组件",
    };
  },

import Hello from "./components/Hello.vue";
components: {
    Hello,
  },
 data() {
    return {
      message: [1, 2, 3],
    };
  },   

 <Content :message="message">
      <template v-slot:header> header </template>
      <template v-slot:body> body </template>
 </Content>

<template>
  <div>
    <slot name="header"></slot>
    <slot name="body"></slot>
  </div>
</template>

 <Content :message="message">
      <template v-slot:header> {{ name }} </template>
      <template v-slot:body> body </template>
    </Content>
<Content></Content>

<slot name="header"><h2>我是一个默认值的H2</h2></slot>

      <template v-slot:header> {{name}} </template>

<slot :list="list" :secondData="secondData"></slo

list: [1, 2, 3, 4, 5],
secondData: "helloCSDN",

<Hello>
      <template v-slot:default="slotProps">{{ slotProps.list }} </template>
</Hello>

 { "list": [ 1, 2, 3, 4, 5 ], "secondData": "helloCSDN" } //打印的结果值

provide: {
 message: "this is message by provide",
},
//根组件 App.vue

inject: ["message"], //子组件 Hello.vues

provide: {
 message: this.message,
},
//会直接报错

provide(){
 return{
    message : this.message
 }
},

provide(){
    return{
       obj : this.obj
    }
  },
data() {
    return {
      obj:{
        message : 'this is jim'
      }
    };
  },

<button @click="obj.message = 'helloCCCC'">改变obj</button>

inject: ["obj"],

 provide() {
    return {
      message: () => this.message,
    };
  },
//父组件

{{ message() }}
// 这里就需要当做一个函数进行执行才可以，否则是不可以的
inject: ["message"],
//子组件

 computed: {
    getInjectVal() {
      return this.message();
    },
  },

 {{ getInject }}

setup() {
 let count = ref(0);
 function changeCount() {
   count.value++; //这里需要注意是value
 }
 return {
   count,
   changeCount,
 };
}
<button @click="changeCount">改变count</button>
<span>{{ count }}</span> 
//这里则不是

let objV = reactive({
      name: "lisi",
    });
    function changeObj() {
      objV.name = "wangwu";
    }
 <button @click="changeObj">改变Obj</button>
 <span>{{ objV.name }}</span>

let objV = reactive({
   name: "lisi",
 });
return {
  ...objV,
 }; 
<span>{{ name }}</span>

let { name } = toRefs(objV);
return {name}

return {...toRefs(objV),}

setup(){
let objV = reactive({
   name: "lisi",
 });
 let objN = reactive({
   name: "zhaosi",
 });
function changeObj() {
   objV.name = "wangwu";
   objN.name = "wanger";
 }
watchEffect(() => {
   console.log(objV.name);
   console.log(objN.name);
 });
}

<button @click="changeObj">改变Obj</button>
<span>{{ objV.name }}</span>
<span>{{ name }}</span>

 let msgc = ref("this is msgc");
 watch(msgc, (n, o) => {
      console.log(n);
      console.log(o);
    });

setup(){
 let msg = ref("hello csdn");
 const cover = computed(() => {
   return msg.value.split("");
 });
 console.log(cover); //ComputedRefImpl 一个对象 里面的value属性才是我们需要的
 return { msg, cover };
}

<span>{{ cover }}</span>

<template>
<div>
 {{ message }}
</div>
</template>
<script>
export default {
name: "Content",
props: {
 message: {
   type: String,
   default() {
     return "";
   },
 },
},
setup(props) {
 console.log(props); //{message: 'hello csdn'}
},
};
</script>

setup(props) {
    console.log(props); //{message: 'hello csdn'}
    //如果使用解构操作，那么会丢失数据本身的响应式，这个时候和之前的操作一样，可以通过torefs进行数据的响应式处理，但是toRefs返回的是一个对象，所以处理之后要进行value的获取
    let { message } = toRefs(props);
    console.log(message.value)
  },

#### vue3-context

setup() {
    let msg = ref("hello csdn");
    function sendData(val) {
      console.log(val.value); //这里是失效的，但是如果没有methods的话，这里是生效的
    }
    return { msg, sendData };
  },
  methods: {
    sendData(v) {
      console.log(v.value); //此时这里是生效的
    },
  },

 <Content class="sty" id="id" :message="msg" @sendData="sendData"></Content>

setup(props, context) {
    let msg = ref("hello csdn");
    function sendData() {
      context.emit("sendData", msg);
    }
    return {
      msg,
      sendData,
    };
  },

<button @click="sendData">发送数据</button>

export default{
   methods: {
    sendData(v) {
      console.log(v.value);
    },
  },
  mounted() {
    console.log(this.$refs.content);
    this.$refs.content.sendData();
  },
}

<Content class="sty" id="id" ref="content" @sendData="sendData"></Content>

 setup(props, context) {
    let msg = ref("hello csdn");
    function sendData() {
      context.emit("sendData", msg);
    }
    context.expose({
      sendData,
    });
    return () => h("div", msg.value);
  },

setup() {
    let name = ref("this is provide");
    provide("name", name);
    function changeName() {
      name.value = "wanger";
    }
    return { changeName };
  },

    <button @click="changeName">改变name</button>

let name = inject("name");

 <router-link to="/">home</router-link>
 <router-link to="/about">about</router-link>
 <router-link to="/use/123">use</router-link>
 <router-view></router-view>

/*
 * @use: 
 * @description: 
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2022-08-02 16:28:12
 * @LastEditTime: 2022-08-02 16:51:21
 * @FilePath: /vue3STUBYLOCAL/Users/leimingwei/Desktop/LeiMingWei/vue3/vue3byvite/src/router/index.js
 */
import { createRouter, createWebHashHistory } from 'vue-router';
import About from '../views/about.vue';
import Home from '../views/home.vue';
import User from '../views/user.vue';
const routes = [
    {
        path: '',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '/use/:id',
        component: Use
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default route

/*
 * @use: 
 * @description: 
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2022-07-27 11:42:23
 * @LastEditTime: 2022-08-02 16:32:45
 * @FilePath: /vue3STUBYLOCAL/Users/leimingwei/Desktop/LeiMingWei/vue3/vue3byvite/src/main.js
 */
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
// 这里的顺序不可以错，先挂载路由，再进行app的挂载
app.use(router)
app.mount('#app')

{
     path: '/use/:id',
     component: Use
 },

 <router-link to="/use/123">use</router-link>

<template>
<div>use {{ params }}</div>
</template>
<script>
export default {
name: "use",
data() {
 return {
   params: "",
 };
},
mounted() {
 this.params = this.$route.params;
 console.log(this.$route.params);
},
methods: {},
};
</script>

<script setup>
import { useRoute } from "vue-router";
console.log(useRoute());
let params = useRoute().params.id;
</script>

export default {
  props: ["id"],
  name: "use",
  data() {},
  mounted() {
    console.log(this.id); 
  },
};

 {
        name: 'use',
        path: '/use/:id',
        component: User,
        props: true, // 意味着我们可以直接通过props的形式进行数据的获取
    },

<script setup> 
const props = defineProps({
    id : String //路由传递参数一般都默认是String类型
})
console.log(props.id) //即为参数
</script>

{
     path: '/shop/:id',
     components: {
         default: Main,
         top: Top,
         footer: Foote
     },
     props: { default: true, top: false, footer: false }
 },

    {
        path : '/:path(.*)',
        component : NotPage
    }
//这里的位置最好是要放到配置映射表的最后，这样是一个一个找，找不到就默认到了notpage页面

    {
        path: '/news/:id(\\d+)',
        component: News
    }
// 比如路由参数只能是数字 ()里面添加正则表达式即可

    {
        path: '/news/:id+',
        component: News
    }

    {
        path: '/news/:id?',
        component: News
    }
// 虽然是可有可无的，但是不可以重复叠加

    {
        path: '/',
        redirect: '/home' //当访问/的时候，我们需要重定向到home组件 这个前提是home组件必须是存在的
    },
    {
        path: '/home',
        component: Home
    },
      // 反过来也是一样的
    {
        path: '/home',
        redirect: '/' //当访问/的时候，我们需要重定向到home组件 这个前提是home组件必须是存在的
    },
    {
        path: '/',
        component: Home
    },
      // 换一种写法
   {
        path: '/',
        redirect: { name: 'home' }
    },
    {
        path: '/home',
        name: 'home',
        component: Home
    },
      //换一种写法 函数的写法
    {
        path: '/',
        redirect: (to) => {
            console.log(to) //{fullPath: '/', path: '/', query: {…}, hash: '', name: undefined, …}
            return { name: 'home' }
        }
    },
    {
        path: '/home',
        name: 'home',
        component: Home
    },
      // 以上都是可以使用重定向进行操作的

    {
        path: '/',
        redirect: { name: 'home' }
    },
    {
        path: '/home',
        name: 'home',
        //alias:'/main', //这个就相当于一个小名，也是可以进行访问的 不要忘记/
        alias:['/main','other'],//可以是多个   
        component: Home
    },

{
     path: '/parent',
     component: Parent,
     children: [
         {
             path: '',
             component: Two
         },
         {
             path: 'one',
             component: One
         },
         {
             path: 'two',
             component: Two
         }
     ]
 },

this.$router.push("/about");

 this.$router.push({
        path: "/about",
      });

this.$router.push({
        path: "/use/123",
      });

this.$router.push({
        name: "use",
        params: { id: 123 },
      });
// 不过这种路由配置的时候需要添加name才可以 如下：
{
        name : 'use',
        path: '/use/:id',
        component: Use
    },   

    <router-link :to="{ name: 'use', params: { id: 789 } }">声明式</router-link>

 this.$router.push({
        path: "/use",
        query: {
          name: "lisi",
        },
      });
// http://127.0.0.1:3030/#/use?name=lisi
// 获取页面参数的时候。直接可以使用this.$route.query即可

this.$router.push({
        path: "/use",
        replace: true,
      });

this.$router.replace({
        path: "/use",
      });

this.$router.go(-1) //后退一步 可以是-2 -3 ... 也可以是1 表示前进一步
this.$router.back() //后退一步 相当于go（-1） 但是back不可以传递参数
this.$router.forword() //前进一步， 相当于go（1） 

import Top from '../views/top.vue';
import Main from '../views/main.vue';
import Footer from '../views/foooter.vue';

{
        path: '/shop', //这个是我们需要进入的时候的名字，只是一个名字，没有这个组件
        components: {
            default: Main, 
            top : Top, 
            footer : Foote
        }
    },
// components 这里使用的是components 而不是component,单个组件的时候使用的是component

router-view
    <router-view name="top"></router-view>
    <router-view></router-view>
    <router-view name="footer"></router-view>

  - Hash

 {
        path: '/about',
        component: About,
        // 每路守卫 / 单独路由守卫
        beforeEnter: (to, from, next) => {
            console.log(to)
            console.log(from)
            next()
        }
    },

//全局守卫 
router.beforeEach((to, from, next) => {
    console.log(to) //从哪儿来
    console.log(from) //到哪儿去
    next() //是否继续通行 
})

  beforeRouteEnter(to, from, next) {
    // ...
  },
  beforeRouteLeave(to, from, next) {
    // ...
  },
  beforeRouteUpdate(to, from, next) {},

beforeRouteEnter(to, from, next) {
    next((vm)=>{
      vm.id // id即是data中定义的变量 这样就可以进行获取
    })
  },

   {
        path: '/about',
        component: () => import('../views/about.vue'),
    },

const Parent = () => import('../views/parent.vue');
   {
        path: '/parent',
        component:Parent
    },

Store/index.js
/*
 * @use: 用于管理项目中需要全局管理的变量
 * @description: 全局状态管理
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2022-08-03 17:43:34
 * @LastEditTime: 2022-08-03 17:54:22
 * @FilePath: /vue3STUBYLOCAL/Users/leimingwei/Desktop/LeiMingWei/vue3/vue3byvite/src/store/index.js
 */
import { reactive } from 'vue'
const store = {
    //存放当前的全局变量 
    state: reactive({
        token: new Date()
    }),
    //用于更新当前的状态
    updateState() {
        this.state.token = new Date()
    }
}
export default store

import Hello from "./components/Hello.vue";
import store from "./store";
export default {
  provide: {
    store,
  },
  components: {
    Hello,
  },
}

<template>
  <div>
    {{ store.state.token }}
    <button @click="changeStore">改变数据</button>
  </div>
</template>
<script>
export default {
  inject: ["store"],
  name: "Hello",
  methods: {
    changeStore() {
      this.store.updateState();
    },
  },
};
</script>

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3030,
    open: true | 'google',
    proxy: {
      //path 随便写，这里写什么，请求的时候前面就写什么就好了
      '/path': {
        target: 'https://i.maoyan.com',// 这就是原本应该的地址
        changeOrigin: true, // 是否开启代码 允许跨域
        rewrite: path => path.replace(/^\/path/, '') //将真正请求的时候的添加的path使用正则替换为空，因为本来就不存在path 是代理的时候加上的,相当于重写路径
      }
    }
  },
  preview: {
    port: 9000,
    strictPort: true,//不可以被替换别的端口
  }
})

axios.get('/path/api......')

module.expores = defineConfig({
  // 这里的名字不同
  devServer: {
    proxy: {
      //path 随便写，这里写什么，请求的时候前面就写什么就好了
      '/path': {
        target: 'https://i.maoyan.com',
        changeOrigin: true, 
        // 这里路径替换的写法不同
        pathRewrite:{
          '^/path' : ''
        }
      }
    }
  }
})

store.js --> 基本变量存储
/*
 * @use: vuex的基本使用
 * @description: vuex 进行全局状态管理
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2022-08-03 23:10:44
 * @LastEditTime: 2022-08-03 23:11:45
 * @FilePath: /vue3STUBYLOCAL/Users/leimingwei/Desktop/LeiMingWei/vue3/vue3byvite/src/vuexStore/index.js
 */

import { createStore } from "vuex";
const store = createStore({
    state() {
        return {
            count: 0
        }
    }
})
export default store

import store from './vuexStore'
const app = createApp(App)
app.use(store) //使用vuex进行全局状态的管理 因为这里挂载了store 那么全局就会有一个 $store
app.mount('#app')

<h4>{{ $store.state.count }}</h4>

<button @click="$store.state.count++">改变store</button>

import { createStore } from "vuex";
const store = createStore({
    state() {
        return {
            count: 0
        }
    },
    mutations: {
        changeState(state, val) {
            state.count += val
        }
    }
})
export default store

    <button @click="changeMutations">通过mutations进行改变数据</button>

methods:{
   changeMutations(){
      this.$store.commit('changeState',1)
    }
}

changeMutations() {
      // this.$store.commit("changeState", 1);
      this.$store.commit({
        type: "changeState",
        val: 1,
      });
    }, 

changeState(state, val) {
            state.count += val.val
        }

 getters: {
        optionMsg(state) {
            return state.msg + 'nb'
        }
    },

    <h4>{{ $store.getters.optionMsg }}</h4>

        /**
         * 
         * @param {*} state  当前state中的属性
         * @param {*} getterVal  当前getter中的属性
         */
        otherGetters(state, getterVal) {
            console.log(state)
            console.log(getterVal.optionMsg)
        }

// 异步方法
    actions: {
        /**
         * 
         * @param { } context 就是当前store的实例对象 包含了当前的state和getters和mutation的属性和方法
         */
        getDatas(context) {
            console.log(context) //{getters: {…}, state: Proxy, rootGetters: {…}, dispatch: ƒ, commit: ƒ, …}
            //.... 可以实现很多异步操作和请求 比如一些fetch请求 axios请求等等
        }
    }

actions: {
  // payload  当前需要传递的值
        optionsMutations(context,payload) {
            context.commit({
                type: 'changeState',
                val: 3
            })
        }
    }

this.$store.dispatch('functionName','params')
changeAction() {
      this.$store.dispatch("optionsMutations");
},

const mudulesOne = {
    state() {
        return {
            name: 'jim'
        }
    }
}
const store = createStore({
    state() {
        return {
            count: 0,
            msg: 'hellocsdn'
        }
    },
    modules: {
        one: mudulesOne
    },
  )}

 <!-- 这里如果是state属性里面的，就需要进行模块名字加上变量名字 如果是getters里面的，则直接可以进行获取，不需要添加模块名字，因为它会自动添加到模块里面 -->
    <h3>{{ $store.state.one.name }}</h3>

const store = createStore({
  modules: {
        one: use
    },
})

import { mapState } from "vuex";
//test 即为vuex store里面定义的state的变量属性
computed: mapState({
    //test: (state) => state.test, //写法一
    test: "test", //写法二
  }),

computed: mapState(["test"]), //写法三

import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
computed: {
    ...mapGetters(["getterFunctionName"]), //解构getters
    ...mapState({
      test: (state) => state.test, //解构state
    }),
  },
 methods: {
    ...mapMutations(["changeState"]), //解构mutation
    ...mapActions(["actionFunctionName"]), //解构actions
    //使用 就不用commit或者dispacth 直接使用函数名字就可以了
   changeMutations() {
      this.changeState({ val: 1 });
    },
  }

const mudulesOne = {
    namespaced: true, //默认就是false
    state() {
        return {
            name: 'jim',
            num: 31415926
        }
    },
    getters: {
        getNum(state) {
            return state.num
        }
    }
}
export default mudulesOne

<h4>{{ $store.getters.getNum }}</h4>

<h4>{{ $store.getters["one/getNum"] }}</h4>

...mapMutations('one',["changeState"]), //解构mutation 使用命名空间且使用辅助解构函数

changeMutations(){
      this.$store.commit('one/changeState',1)
    }
// 使用命名空间但是不使用辅助解构函数

computed: {
 // ...mapState([
 //   "test", //写法二
 // ])
 ...mapState({
   test: (state) => state.test, //写法一
 }),
 //other 需要的计算属性方法
},

mounted() {
    console.log(this.test); //this is test
  },

<h4>{{ test }}</h4>