介绍
这篇文章给大家分享的是有关怎么用vuex的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
首先贴上官方文档,https://vuex.vuejs.org/guide/modules.html
根据提示运行npm运行服务熟悉的界面就来了:
这些没必要说了,下面进入正题,其实已经自动整合了vuex
并且创建了,store.ts以前 <>以前import Vue 得到& # 39;vue # 39;;
import Vuex 得到& # 39;vuex& # 39;;
Vue.use (Vuex);
export default new Vuex.Store ({
状态:{
,,,的名字:,& # 39;Hello 词# 39;
,,,数:,1,
,,,用户:,(
,,,,,,,{,名字:& # 39;×××& # 39;,,年龄:,18,},
,,,,,,,{,名字:& # 39;小刘& # 39;,,年龄:,18,},
,,,,,,,{,名字:& # 39;小王& # 39;,,年龄:,11,},
,,,,,,,{,名字:& # 39;小张& # 39;,,年龄:,18,},
,,,,,,,{,名字:& # 39;小鹏& # 39;,,年龄:,18,},
,,,,,,,{,名字:& # 39;小强& # 39;,,年龄:,19,},
,,,,,,,{,名字:& # 39;小子& # 39;,,年龄:,20,},
,,,)
},
突变:{
,,,增量(状态,有效载荷),{
,,,,,,,//,mutate 状态
,,,,,,,state.count +=, payload.count;
,,,},
},
getter: {
,,,getAges:,(状态),=祝辞,{
,,,,,,,return state.users.filter (user =祝辞,{
,,,,,,,,,,,return user.age 祝辞,18;
,,,,,,,});
,,,}
},
行动:{
},
}); <>之前(稍微添加了点东西);
那么我们在页面上怎么用他呢?
只需要引入,store.ts ,然后,store.state 就可以获取状态了
以前以HelloWorld.vue 为例 <>以前& lt; template>
& lt;才能div 类=癶ello"比;
,,,& lt; template>
,,,,,& lt; el-radio v模型=癱heckTest", @change=癱lickHandle",标签=?”;在备选项& lt;/el-radio>
,,,,,& lt; el-radio v模型=癱heckTest", @change=癱lickHandle",标签=?“祝辞备选项& lt;/el-radio>
,,,& lt;/template>
& lt;才能/div>
& lt;/template>
& lt;才能/div>
& lt;/template>
& lt; script lang=皌s"祝辞
import {,组件,道具,Vue },得到“vue-property-decorator";
import store 得到“/. ./store";
import Combilestore 得到“. ./combineStore";
@ component
export default class HelloWorld extends Vue {
@Prop才能(),private 味精!:,字符串;
数据(),才能{//data 直接定义
,,,//数据
,,,return {
,,,,,checkTest:,“1”;
,,,};
,,}//以才能前包裹在方法里面,现在可以独立出来
clickHandle才能(val), {
,,,//调用vuex的commit 方法提交mutations 更新状态
,,,//输出获取state store.state 这个应该和react 几乎一模一样
,,,console.log (store.state.checkTest);
,,,store.commit (“setCheckedVal",, {, val:“1“,});
,,}//才能生命周期
安装(),{才能
,,,console.log (store.state.checkTest);
,,}
}
& lt;/script>
& lt; !——, Add “scoped", attribute 用limit CSS 用却;能够component only ——比;
& lt; style scoped lang=皊css"比;
h4 {
保证金才能:40 px 0, 0;
}
ul {
list-style-type才能:没有;
,,填充:0;
}
li {
,,显示:inline-block;
保证金才能:0,10 px;
}
a {
,,颜色:# 42 b983;
}
& lt;/style> getter是对国家的一些过滤操作,如果想要改变状态就执行store.commit方法
第一个参数是突变名称在商店的突变下定义。
第二个参数是传递的参数类似react-redux的行动。
现在都是在一个商店文件上定义所有状态,当项目越来越大的时候如果还采用这种方式,那么店必定越来越大,有没有什么办法优化呢?当然有那就是模块
官网例子
新建一个店取名combineStore.ts:
<>之前,import Vue 得到& # 39;vue # 39;; null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null
