Question

我正在寻找一个使用RadDataForm / Vue更新vuex存储中数据的示例。我的数据没有问题，但是我无法在当前文档中找到解释数据更新时如何触发更新功能的任何地方。这是一个简单的示例，当更新数据并单击表单中的完成后，如何触发save（）函数？

  <StackLayout>
            <StackLayout orientation="vertical" backgroundColor="lightgray">
             <RadDataForm 
                :source="record"
                 />
   </StackLayout>
   <script>
    export default {
        data() {}
        },
        methods:{
         save(){
             console.log('save')
            }, 
        }
        computed:{
            record (){
                return this.$store.getters.record;
            }
        },
     };
```

Answer 1

您只需要向本地属性添加观察者，我建议使用Vuex中的mapState。

你可以有这样的东西：

  computed: mapState({
    record: this.$store.getters.record;
  })

还有一个观察器，它根据值是否已更改来设置函数的回调。

  watch: {
    record: function () {
     // something to run when record changes
    }

总而言之，您有一个来自商店的本地映射变量和一个观察器，该观察器根据信息是否已更改进行操作。希望这会有所帮助

See: MapState Helper See: Computed properties and watchers

Answer 2

好的，我找到了答案。我在nativescript / vue文档中找不到的任何地方都没有对此进行记录。我发现：RadDataForm Commit Documentation。因此，使用它，我修改为（保留Luis的mapState。）我添加了：

v-on：propertyCommitted =“保存”到RadDataForm

所以，这可行：

 `<StackLayout>
            <StackLayout orientation="vertical" backgroundColor="lightgray">
             <RadDataForm 
                :source="record"
                 v-on:propertyCommitted="save"/>
   </StackLayout>
   <script>
    export default {
        data() {}
        },
        methods:{
         save(){
             console.log('save')
            }, 
        }
        computed: mapState({
        record(state){
            return record = this.$store.getters.record;
        }
     };`

Answer 3

这是对此的更详细的答案。显然，我会在保存功能中设置存储值。

    <StackLayout>
            <StackLayout orientation="vertical" backgroundColor="lightgray">
             <RadDataForm 
                id="myDataForm"
                :source="record"
                 v-on:propertyCommitted="save"/>
   </StackLayout>
   <script>
    import { mapState } from 'vuex'
    import { getViewById } from "tns-core-modules/ui/core/view";
    export default {
        data() {}
        },
        methods:{
         save(){
            console.log('save')
            let data = args.object
            var dataform = getViewById(data, "myDataForm");
            console.log(dataform.editedObject)//<--updated Data Here
            }, 
        }
        computed: mapState({
        record(state){
            return record = this.$store.getters.record;
        }
     };

RadDataForm更新示例

3 个答案: