1、在vue项目中①：使用命令yarn add vuex安装vuex插件②：新建文件命名为store.js,在文件中引入vue和vuex并使用vuex③构建新的Vuex.store对象,传入作为参数的对象，对象中包含基本的state、getter、mutations、actions四个属性。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state:{
x:0,
},
getters:{},
mutations:{},
actions:{},
})
2、将store.js文件引入到main.js文件中，将store作为子属性传入构建出vue对象。这样在全局都可以访问到store中存储的数据。
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')
3、这样就可以在任何vue文件中通过this.$store.state来访问数值了。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
{{a}}
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
a:1,
}
},
created(){
this.a = this.$store.state.x;
console.log(this.a)
}
}
</script>
控制台打印出访问结果
4、mapState同样是获取store中存储数据，只不过是更便捷而已。用法：①在对应的文件中通过解构形式引入import { mapState } from 'vuex'模块②在computed方法中调用mapState方法，传入作为参数的对象。其中对象属性名为要获取的数据名称，值为箭头函数state => state.x③在vue页面中就可以访问到这个数据了。
computed:mapState({
y:state => state.y
})
//另一种更简单写法
computed:mapState(['x','y'])
image.png
5、getter的作用是将state作为参数传递给它里面写的方法，但是不会更改state中存储的数据。也就是说它的作用在项目中被直接取值（this.$stote.state.x然后在vue页面中计算）方式取代了。
getters:{
earth(state){
return state.x.text + state.x.age
}
},
--------
data(){
return{
a:1,
}
},
created(){
this.a = this.$store.getters.earth
},
image.png
6、getter除了可以接受state，getter（它本身），还可以接受当外部调用它时传递的参数。写法是（state）=> (id) => { },id就是外部参数，不能缺少state否则会报错。同样也有辅助函数mapGetters用法和mapState一样。
7、mutations不同于getter之处在于，调用mutations中的函数，会改变state中存储的值。比如原有的值为number类型，调用方法可以更改为array类型的。mutations传参用法比getter方便的多。
mutations:{
//state中现在没有变量newObj，我们可以新建一个
add:(state,data) =>{
state.newObj = {
name:'张三',
age:'20',
word:data
}
}
},
-------------
created(){
this.$store.commit('add','教师')
this.a = this.$store.state.newObj
},
image.png
image.png
8、actions是用于异步更改state中数据，但还是通过mutations中的方法，它调用mutations中方法和在vue页面中调用mutataions中的函数一样。例如context.commit('numAdd')，context是参数名称可以是任意的指代的就是state。
mutations:{
//state中现在没有变量newObj，我们可以新建一个
add:(state,data) =>{
state.newObj = {
name:'张三',
age:'20',
word:data
}
},
numAdd(state){
state.y = state.y*10
console.log(state.y)
}
},
actions:{
abc(context){
setTimeout(() => {
context.commit('numAdd')
},2000)
}
},
-----------------
created(){
this.$store.dispatch('abc')
},
computed:{
b(){
return this.$store.state.y
}
}
image.png
9、当使用多个js文件来存储数据（这样方便对数据进行分类管理）时，可以使用vuex的modules功能来管理。用法：主文件中构建store对象只需要传入属性modules，它的值分别是被管理的js文件的名称。
//这是在index.js中写法。
import Vue from 'vue';
import Vuex from 'vuex';
import common from './common.js'
import page from './page'
Vue.use(Vuex);
export default new Vuex.Store({
modules:{
common,
page,
}
})
//这是在被引入文件中的写法，两种写法均可以被正常使用
//第一种写法
const abc = {
state : {
y:10,
},
getter : {},
mutations : {
numAdd(state){
state.y = state.y*10
console.log(state.y)
}
},
actions : {
abc(context){
setTimeout(() => {
context.commit('numAdd')
},2000)
}
}
}
export default abc
//第二种写法
const state = {
x:{
text:'地球',
age:'40亿岁'
},
}
const getter = {}
const mutations = {
//state中现在没有变量newObj，我们可以新建一个
add:(state,data) =>{
state.newObj = {
name:'张三',
age:'20',
word:data
}
},
}
const actions = {}
export default {
state,
getter,
mutations,
actions,
}
10、namespaced值为true，我们调用mutation方法需要指定模块的名称。例如两个模块page和common中两个方法同名，在实际使用时会造成混淆，开启命名空间口，当我们调用某个模块方法时需要指定是哪个模块下的。
网友评论