简单使用
首先使用vite项目后安装vuex
npm install vuex@next --save
或者
yarn add vuex@next --save
安装完后，来查看下
来到main.js，引入我们的vuex
import {
createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store).mount('#app')
在src下创建一个文件夹store，store下创建文件夹test，test下创建index.js文件
test中index中代码如下
export const test = {
state: {
//设置属性 用来存储数据
index: 999 // 设置的值
},
getters: {
//对应方法 用来获取属性的状态
},
mutations: {
//更改属性的状态
},
actions: {
//应用 mutation 用于异步
}
}
store文件下index.js配置如下
import {
createStore } from 'vuex'
import {
test} from './text/index'
export default createStore({
//vue3.0需要使用createStroe配置
modules: {
test //分模块管理 test
}
})
app.vue中配置如下
<script>
import {
useStore } from "vuex"; //需要引入vuex
export default {
setup() {
let store = useStore(); // 定义
console.log(store.state.test); // 这里可以结果可以查看statez中属性
console.log(stote.state.test.index) // 输出结果为999
},
};
</script>
功能使用
mutations的使用：更改属性的状态或值
test中index中代码如下:
export const test = {
state: {
//设置属性 用来存储数据
index: 999 // 设置的值
},
getters: {
//对应方法 用来获取属性的状态
},
mutations: {
//更改属性的状态
setChangeindex(state, val) {
state.index = val //state为vuex中的state,val为更改属性的值
}
},
actions: {
//应用 mutation 用于异步
}
}
app.vue中的配置如下
import {
computed } from 'vue'
import {
useStore } from "vuex";
export default {
setup() {
let store = useStore();
console.log(store.state.test.index); //999
store.commit('setChangeindex',50)
console.log(store.state.test.index) //50
},
};
如果渲染模板中需要使用到index则：
return {
index: computed(() => store.state.test.index),
};
getters的使用
在test中index.js配置
export const test = {
state: {
//设置属性 用来存储数据
index: 999 // 设置的值
},
getters: {
//对应方法 用来获取属性的状态
getindex:state => state.index+1,
},
mutations: {
//更改属性的状态
setChangeindex(state, val) {
state.index = val //state为vuex中的state,val为更改属性的值
}
},
actions: {
//应用 mutation 用于异步
}
}
app.vue的配置
import {
computed } from "vue";
import {
useStore } from "vuex";
export default {
setup() {
let store = useStore();
console.log(store.state.test);
store.commit("setChangeindex", 50);
console.log(store.state.test.index);
console.log(store.getters.getindex); // 51 可以获取index的状态
return {
shuju: computed(() => store.state.test.index),
};
},
};
action的使用
在test下index的配置
export const test = {
state: {
//设置属性 用来存储数据
index: 999,// 设置的值
resdata: '',
},
getters: {
//对应方法 用来获取属性的状态
getindex: state => state.index + 1,
},
mutations: {
//更改属性的状态
setChangeindex(state, val) {
state.index = val //state为vuex中的state,val为更改属性的值
},
setRESdata(state, val) {
state.index = val
}
},
actions: {
//应用 mutation 用于异步
getres(context, vm) {
return new Promise((resolve, reject) => {
//发起请求
axios({
url: '接口地址',
method: 'get',
data: {
},
dataType: 'json',
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
.then(res => {
// console.log(res)
let data = res.resultData
context.commit('numRemindObj', data)
resolve()
})
// })
})
},
getindexs({
commit }, params) {
//设置值
setTimeout(() => {
commit("setRESdata", params)
}, 1000)
}
}
}
在app.vue中的配置
import {
computed } from "vue";
import {
useStore } from "vuex";
export default {
setup() {
let store = useStore();
console.log(store.state.test);
store.commit("setChangeindex", 50);
console.log(store.state.test.index);
console.log(store.getters.getindex);
console.log (store.dispatch('getres')) //action <pedding>状态
console.log(store.dispatch('getindexs',{
resdata:2000})) //action <pedding>状态
return {
shuju: computed(() => store.state.test.index),
};
},
};
模块化使用
3.0中模块化的使用比较简单 分配即可，用到其他模块import后在modules注册就行。
import {
createStore } from 'vuex'
import {
test} from './text/index' //test模块
export default createStore({
modules: {
test //test的模块
}
})