这篇文章给大家分享的是有关怎么用vuex的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
首先贴上官方文档，
https://vuex.vuejs.org/guide/modules.html
计算
安全
数据库
网络和加速
企业服务
新建项目就不多说了，用vue-cli ，在新建项目的选项上选择了typescript 和class 类的方式，这种形式也和react 的class 方式是很像的，然后一直下一步下一步，项目就给你自动创建成功了，很吊有没有。
根据提示 运行 npm run serve 熟悉的界面就来了：
这些没必要说了，下面进入正题，其实已经自动整合了vuex 并且创建了 store.ts
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
name: 'Hello Word',
count: 1,
users: [
{ name: '×××', age: 18 },
{ name: '小刘', age: 18 },
{ name: '小王', age: 11 },
{ name: '小张', age: 18 },
{ name: '小鹏', age: 18 },
{ name: '小强', age: 19 },
{ name: '小子', age: 20 },
]
},
mutations: {
increment(state, payload) {
// mutate state
state.count += payload.count;
},
},
getters: {
getAges: (state) => {
return state.users.filter(user => {
return user.age > 18;
});
}
},
actions: {
},
});(稍微添加了点东西)；
那么我们在页面上怎么用他呢？
只需要引入 store.ts 然后 store.state 就可以获取state了
以HelloWorld.vue 为例<template>
<div class="hello">
<template>
<el-radio v-model="checkTest" @change="clickHandle" label="1">备选项</el-radio>
<el-radio v-model="checkTest" @change="clickHandle" label="2">备选项</el-radio>
</template>
</div>
</template>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import store from "./../store";
import Combilestore from "../combineStore";
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
data() {//data 直接定义
//数据
return {
checkTest: "1"
};
}
//以前包裹在methods里面，现在可以独立出来
clickHandle(val) {
//调用vuex的commit 方法提交mutations 更新state
//输出获取state store.state 这个应该和react 几乎一模一样
console.log(store.state.checkTest);
store.commit("setCheckedVal", { val: "1" });
}
//生命周期
mounted() {
console.log(store.state.checkTest);
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h4 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>getters 是对state的一些过滤操作，如果想要改变state 就执行store.commit 方法
第一个参数是mutations名称 在store的 mutations 下定义。
第二个参数是传递的参数 类似react-redux 的 actions。
现在都是在一个store文件上定义所有state ，当项目越来越大的时候如果还采用这种方式，那么store必定越来越大，有没有什么办法优化呢？当然有那就是Modules
官网例子
新建一个store 取名 combineStore.ts：
import Vue from 'vue';
import Vuex from 'vuex';
const moduleA = {
state: { name: "moduleA" },
mutations: {},
actions: {},
getters: {}
}
const moduleB = {
state: { name: "moduleB" },
mutations: {},
actions: {}
}
const Combilestore = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
// store.state.a // -> `moduleA`'s state
// store.state.b // -> `moduleB`'s state
export default Combilestore;在组件中引入就可以用了：
import Combilestore from "../combineStore";
用法和普通store 并无区别
还可以整合elementUi
main.ts
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
//引入elementui
import ElementUI from 'element-ui';
//引入样式
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');感谢各位的阅读！关于“怎么用vuex”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
