关于在vue3脚手架创建的项目中初步使用store文件
在用vue3脚手架创建完成后项目工程里出现store文件夹，里面有个index.js文件，根据查找网上的信息来看，里面都是存储一些全局变量、异步变量、状态管理之类的。在这里，我初步使用了一下这个文件，仅作个人感悟，很暴力的使用。
先看一下脚手架生成的store文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { createStore } from 'vuex'
export default createStore({
state: {
// 放置变量所用
},
mutations: {
// 获取set方法
},
actions: {
},
modules: {
},
})
|
这里我先暂时用了两个方法，state和mutations，分别是放置全局变量和set方法
在vuex官网上还有一个概念：Getter ，在这个方法里可以写get方法获取变量
于是，修改过后的store文件如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| import { createStore } from 'vuex'
export default createStore({
state: {
url: "/api" + JSON.parse(window.sessionStorage.getItem("admin")).adminpic
},
getters: {
geturl: state => state.url
},
mutations: {
seturl(state,newurl){
state.url = newurl
}
},
actions: {
},
modules: {
},
})
|
这里存储了一个全局变量url、get方法和set方法
然后在组件1中引用
1.vue
1
2
3
4
5
6
7
8
9
10
11
12
| <script>
export default {
data () {
return {
url: “”
}
},
created () {
this.url = this.$store.getters.geturl //这里用get方法获取到变量
}
}
</script>
|
在组件2中修改全局变量
2.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script>
export default {
data () {
return {
url: "111"
}
},
methods: {
change () { // 这里是你自己随意定义的一个方法
this.$store.commit("seturl",this.url) // 这里使用set方法对store中的变量进行更改
}
}
}
</script>
|
经过change方法更改过后，store中的变量url就更改为111了
组件2让store变量修改后因为组件1已经DOM渲染完了，所以如果想让组件1也随之改变，就需要对组件1的变量url进行监听
监听代码如下：
1.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <script>
export default {
data () {
return {
url: “”
}
}，
computed: { // computed是计算属性，state里面的url改变之后，就会进行一次计算，并返回计算值到对应的参数中
url () {
return this.$store.state.url
}
},
watch:{ // 监听属性，在computed计算属性更改之后会触发参数值的改变，所以能够监听到
url () {
// 这里会在commit之后触发，然后做后续的操作
this.url = this.$store.getters.geturl
}
},
created () {
this.url = this.$store.getters.geturl //这里用get方法获取到变量
}
}
</script>
|
这样的话，在组件2中修改store全局变量后，组件1会检测到然后里面的变量也会随之修改
当然，这是最粗暴的使用奥，若有不规范的，轻喷
关于在vue3脚手架创建的项目中初步使用store文件
